:root {
    --bg: #f1ecec;
    --bg-tint-1: #efe4e4;
    --bg-tint-2: #f1ecec;
    --card: #ffffff;
    --card-border: #ece3e3;
    --surface: #f8f4f4;
    --text: #2b1f1f;
    --muted: #857374;
    /* Texto pequeno DENTRO de grafico (eixo, legenda do donut). Separado do
       --muted porque aquele mede 4,47:1 sobre o cartao e reprova AA em 10,5px;
       este mede 5,01:1. Ver o comentario em .rp-axis. */
    --ch-axis: #7d6b6c;
    /* ⚠️ `--primary-base` é a cor ESCOLHIDA (padrão ou vinda de Configurações →
       CSS); `--primary` é a cor EM USO. A separação existe para o modo escuro
       poder clarear a cor sem se referir a si mesmo — `--primary: color-mix(…
       var(--primary) …)` seria referência circular e o navegador descarta. */
    --primary-base: #993635;
    --primary: var(--primary-base);
    --primary-hover: #632324;
    --primary-soft: rgba(153, 54, 53, .10);
    --danger: #c0362f;
    --danger-soft: rgba(192, 54, 47, .10);
    --success: #12a150;
    --ring: rgba(153, 54, 53, .20);
    /* Segundo brilho do fundo do body. Era literal e virava mancha clara no escuro. */
    --bg-glow: var(--bg-glow);
    --radius: 16px;
    --shadow: 0 18px 45px -22px rgba(99, 35, 36, .30);
    --shadow-sm: 0 2px 10px -4px rgba(99, 35, 36, .16);

    /*
     * Bolhas da conversa do chamado (`.cht-out` = equipe, `.cht-note` = nota
     * interna). São TOKENS e não hex escrito no componente porque o corpo da
     * mensagem usa `var(--text)`: com o fundo fixo em claro, o modo escuro
     * deixava texto claro sobre fundo claro — a mensagem sumia (relatado em
     * produção, /chamados/ver). Regra da casa: superfície colorida vira token,
     * senão o escuro não a alcança.
     */
    --chat-out-bg: #f2fbf5;
    --chat-out-line: #17a34a;
    --chat-out-name: #0a7a37;
    /* ⚠️ O avatar é um círculo com TEXTO BRANCO por cima (`.cht-avatar`), então
       ele tem token próprio: reusar o da borda (mais clara) derrubaria o
       contraste das iniciais no modo claro. */
    --chat-out-avatar: #0a7a37;
    --chat-note-bg: #fffaed;
    --chat-note-line: #e0b431;
    /* ⚠️ Escurecidos: com os originais (`#9a7714` no nome e `#c99a1e` no
       avatar) o contraste media 4,01:1 e 2,58:1 — abaixo do mínimo legível,
       já no modo CLARO. Medido, não estimado. */
    --chat-note-name: #8a6a10;
    --chat-note-avatar: #9a7714;

    /*
     * WhatsApp (`/whatsapp`) — MESMO defeito do chamado, encontrado na
     * varredura: a bolha de saída tinha `#d9fdd3` fixo e a `.wa-bubble` não
     * declara cor nenhuma, então herda `var(--text)`. No escuro dava texto
     * claro sobre verde claro. A tela de conversa inteira (`--wa-canvas`)
     * também era clara e não era alcançada pelo tema.
     */
    --wa-canvas: #ece5dd;
    --wa-out-bg: #d9fdd3;
    --wa-out-name: #128c3f;
    --wa-meta: #667781;

    /*
     * Kanban (Planejamento / Notificação → Chamados) e o modal do card. Eram
     * hex escritos nos componentes, e o escuro não os alcançava — o título do
     * card media 1,21:1 no escuro (navy #172b4d sobre fundo escuro). Regra da
     * casa: superfície ou tinta colorida vira token, senão o tema não chega.
     */
    --kb-col-bg: #faf7f7;
    --kb-card-border: #eadfdf;
    --kb-card-accent: #cbd5e1;
    --kb-count-bg: rgba(16, 24, 40, .07);
    --kb-count-ink: #55606e;
    /* Card atrasado: superfície rosada. Era #fff6f6 fixo — no escuro, texto
       claro sobre fundo claro e o card mais urgente do quadro sumia. */
    --kb-card-late-bg: #fff6f6;
    --tc-bg: #f7f8f9;
    --tc-ink: #172b4d;
    --tc-ink-soft: #44546f;
    --tc-ink-muted: #6b7280;
    --tc-chip: #dfe3e6;
    --tc-chip-hover: #cfd6dc;
    --tc-progress: #22a06b;
    --tc-danger: #b91c1c;
    --tc-danger-soft: #fbe9e9;
    --tc-danger-soft-hover: #f7d7d7;
    /* Tinta dos alertas: os hex foram escolhidos para fundo claro. */
    --alert-error-ink: #b42318;
    --alert-success-ink: #087443;
    --alert-info-ink: #1d4ed8;
    --alert-warn-ink: #92400e;
    /* Selo neutro (.pill-muted): fundo e tinta acompanham o tema. */
    --pill-muted-bg: rgba(16, 24, 40, .06);
    --pill-muted-ink: #667085;
    /*
     * ⚠️ Borda de CONTROLE (botão fantasma, campo) separada da borda de cartão.
     * No escuro `--card-border` (#382c2d) sobre `--card` (#211a1b) mede 1,28:1
     * — o botão "Ver" da tabela sumia. Controle precisa de ≥ 3:1 (AA para UI);
     * cartão não precisa, é só um contorno. No claro os dois coincidem.
     */
    --control-border: var(--card-border);

    font-synthesis: none;
}

* { box-sizing: border-box; }

/* O atributo hidden sempre vence classes que definem display (flex/grid/etc.) */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 2rem 1rem;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--text);
    background:
        radial-gradient(1200px 600px at 15% -10%, var(--bg-tint-1), transparent 60%),
        radial-gradient(1000px 500px at 100% 0%, var(--bg-glow), transparent 55%),
        var(--bg);
    -webkit-font-smoothing: antialiased;
}

/* ---------- Card ---------- */
.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2.25rem 2rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1.75rem;
}
.brand-mark {
    width: 40px; height: 40px;
    border-radius: 11px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    color: #fff; font-weight: 800; font-size: 1.15rem;
    box-shadow: 0 8px 20px -6px var(--ring);
}
.brand-name { font-weight: 700; letter-spacing: .2px; }

.auth-card h1 {
    font-size: 1.5rem;
    margin: 0 0 .4rem;
    letter-spacing: -.02em;
}
.auth-card .sub {
    color: var(--muted);
    font-size: .93rem;
    margin: 0 0 1.6rem;
    line-height: 1.5;
}

/* ---------- Form ---------- */
.field { margin-bottom: 1.1rem; }
.field label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: .45rem;
}
.field input,
.field select {
    width: 100%;
    padding: .8rem .9rem;
    font-size: 1rem;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: 11px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.field input::placeholder { color: #9aa4b2; }
.field input:focus,
.field select:focus {
    border-color: var(--primary);
    background: var(--card);
    box-shadow: 0 0 0 4px var(--ring);
}

/* Código OTP */
.otp-input {
    letter-spacing: .6em;
    text-align: center;
    font-size: 1.5rem !important;
    font-variant-numeric: tabular-nums;
    padding-left: .6em !important;
}

/*
 * ⚠️ `text-decoration: none` aqui e no `.btn-ghost`: metade dos "botões" do
 * sistema são `<a>` (Ver, Baixar, Cancelar, + Nova chave), e sem isto o
 * navegador os sublinhava. O projeto vinha contornando caso a caso com o
 * utilitário `u-w-auto_td-none` — que continua funcionando, mas deixa de ser
 * necessário em botão novo. Um link que tem cara de botão não se sublinha.
 */
.btn {
    width: 100%;
    padding: .85rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: var(--primary);
    border: none;
    border-radius: 11px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 8px 18px -8px var(--ring);
    transition: background .15s, transform .05s;
}
.btn:hover { background: var(--primary-hover); }
.btn:active { transform: translateY(1px); }
.btn-ghost {
    width: 100%;
    padding: .85rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    background: var(--card);
    border: 1px solid var(--control-border);
    border-radius: 11px;
    color: var(--text);
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
.btn-ghost:hover { background: var(--surface); border-color: #d3dae4; }

/* ---------- Alerts ---------- */
.alert {
    padding: .75rem .9rem;
    border-radius: 11px;
    font-size: .9rem;
    margin-bottom: 1.2rem;
    border: 1px solid transparent;
}
.alert-error {
    background: var(--danger-soft);
    border-color: rgba(229, 72, 77, .28);
    color: var(--alert-error-ink);
}
.alert-success {
    background: rgba(18, 161, 80, .10);
    border-color: rgba(18, 161, 80, .28);
    color: var(--alert-success-ink);
}

/* ---------- 2FA setup ---------- */
.qr-wrap {
    display: grid;
    place-items: center;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 16px;
    margin: 0 auto 1.25rem;
    width: max-content;
}
.qr-wrap canvas, .qr-wrap img { display: block; }

.secret-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    background: var(--surface);
    border: 1px dashed var(--card-border);
    border-radius: 11px;
    padding: .7rem .9rem;
    margin-bottom: 1.4rem;
}
.secret-box code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .95rem;
    color: var(--text);
    word-break: break-all;
}
.steps {
    counter-reset: step;
    list-style: none;
    padding: 0;
    margin: 0 0 1.4rem;
    color: var(--muted);
    font-size: .9rem;
}
.steps li {
    position: relative;
    padding: .35rem 0 .35rem 2rem;
    line-height: 1.5;
}
.steps li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute; left: 0; top: .3rem;
    width: 1.4rem; height: 1.4rem;
    display: grid; place-items: center;
    font-size: .75rem; font-weight: 700;
    color: var(--primary);
    background: var(--primary-soft);
    border-radius: 50%;
}

.helper {
    text-align: center;
    color: var(--muted);
    font-size: .85rem;
    margin-top: 1.25rem;
}
.helper a { color: var(--primary); text-decoration: none; }
.helper a:hover { text-decoration: underline; }

/* ---------- Dashboard ---------- */
.dash { width: 100%; max-width: 960px; }
.dash-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}
.dash-user { display: flex; align-items: center; gap: .8rem; }
.avatar {
    width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    color: #fff; font-weight: 700;
}
.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
.stat {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 1.4rem;
    box-shadow: var(--shadow-sm);
}
.stat .label { color: var(--muted); font-size: .82rem; }
/*
 * ⚠️ Tabulares aqui pelo mesmo motivo da `.table`, e com um ganho extra: os
 * cards de resumo ficam LADO A LADO num grid, então "2.847" e "9.412" precisam
 * ter a mesma largura para as colunas de números não dançarem entre um card e
 * o outro. Componente compartilhado por Chamados, Reembolsos, Compras,
 * Fornecedores, Patrimônio, RH e Carteira — um lugar, sete módulos.
 */
.stat .value {
    font-size: 1.6rem;
    font-weight: 700;
    margin-top: .35rem;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    /* ⚠️ "R$ 1.284.930,00" quebrava entre o "R$" e o número no card estreito —
       o número mais importante da Carteira saía partido em duas linhas. */
    white-space: nowrap;
}
.stat-link { text-decoration: none; color: inherit; display: block; transition: box-shadow .15s, transform .15s, border-color .15s; }
.stat-link:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--primary); }
/* Card de resumo que É o filtro em uso (ADM → Compras). Sem esta marcação, o
   card e a aba mostram o mesmo número e nenhum dos dois diz qual está valendo.
   ⚠️ A borda usa a cor do PRÓPRIO card (`--ch-c`, que cada `.co-stat-*`
   define) e não a da marca: assim o "ativo" reforça a identidade do status em
   vez de apagá-la. O anel é `box-shadow`, não `border-width` — mudar a
   espessura da borda deslocaria o conteúdo em 1px. */
.stat-link.is-ativo {
    border-color: var(--ch-c, var(--primary));
    box-shadow: 0 0 0 2px var(--ch-soft, var(--primary-soft));
}
.stat .value.sla-alert { color: #c0322f; }

/* Cards de resumo dos chamados — com ícone e cor por tipo */
.ch-stat { display: flex; align-items: center; gap: 1rem; position: relative; overflow: hidden; }
.ch-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--ch-c, var(--primary)); }
.ch-stat .ch-stat-ico {
    flex: none; width: 48px; height: 48px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    color: var(--ch-c, var(--primary)); background: var(--ch-soft, var(--primary-soft));
}
.ch-stat .ch-stat-ico svg { width: 24px; height: 24px; }
.ch-stat .value { color: var(--ch-c, var(--text)); margin-top: .15rem; }
.ch-stat-open { --ch-c: #1a63d6; --ch-soft: rgba(26, 99, 214, .12); }
.ch-stat-prog { --ch-c: #d97706; --ch-soft: rgba(217, 119, 6, .12); }
.ch-stat-done { --ch-c: #12a150; --ch-soft: rgba(18, 161, 80, .12); }
.ch-stat-sla  { --ch-c: #c0322f; --ch-soft: rgba(192, 50, 47, .12); }
.badge {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .78rem; font-weight: 600;
    color: var(--success);
    background: rgba(18, 161, 80, .12);
    padding: .25rem .6rem; border-radius: 999px;
}
.logout-inline { display: inline; }

.app-footer {
    color: #98a2b3;
    font-size: .8rem;
}

@media (max-width: 480px) {
    .auth-card { padding: 1.75rem 1.35rem; }
}

/* ==============================================================
   Shell autenticado (barra de topo + menu horizontal)
   ============================================================== */
body.has-nav {
    display: block;
    padding: 0;
    align-items: stretch;
    justify-content: flex-start;
}

/* Barra superior (branca): logo + usuário */
.topstrip {
    background: var(--card);
    border-bottom: 1px solid var(--card-border);
    position: relative;
    z-index: 60; /* acima da barra de menu (.topbar z-index:50) p/ o tooltip não ficar por baixo */
}
.topstrip-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem 1.25rem;
    min-height: 54px;
}
.topstrip-links {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}
.topstrip-right { display: flex; align-items: center; gap: .8rem; margin-left: auto; }
.topstrip-right .topbar-user.dropdown { margin-left: 0; }
.topstrip-link {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .4rem .7rem; border-radius: 999px;
    font-size: .85rem; font-weight: 600; text-decoration: none;
    color: rgba(255, 255, 255, .92);
    transition: background .15s, color .15s;
}
.topstrip-link:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.topstrip-link.active { background: rgba(255, 255, 255, .18); color: #fff; }
.topstrip-link .ts-icon { display: inline-flex; }
.topstrip-link .nav-badge { position: static; margin-left: .1rem; }
/* Conversas na barra superior (fundo branco), ao lado do botão Aninha. */
.conversas-link {
    position: relative;
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .42rem .8rem; border-radius: 999px;
    font-size: .85rem; font-weight: 600; text-decoration: none;
    color: #5a4a4a; background: #f4eeee; border: 1px solid var(--card-border);
    transition: background .15s, color .15s, border-color .15s;
}
.conversas-link:hover { background: #ece3e3; color: var(--primary); border-color: #dccccc; }
.conversas-link.active { background: #ece3e3; color: var(--primary); border-color: #dccccc; }
/* Barra superior: só ícones, com o nome em tooltip ao passar o mouse. */
.conversas-link { padding: .42rem .5rem; }
.conversas-link .conversas-label { display: none; }
.conversas-link[data-tip]::after {
    content: attr(data-tip);
    position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%);
    background: #2b1f1f; color: #fff; font-size: .72rem; font-weight: 600; letter-spacing: .01em;
    padding: .25rem .5rem; border-radius: 6px; white-space: nowrap;
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s; z-index: 30;
}
.conversas-link[data-tip]:hover::after, .conversas-link[data-tip]:focus-visible::after { opacity: 1; visibility: visible; }
.conversas-link-wa { color: #25d366; padding: .42rem .5rem; }
.conversas-link-wa:hover { color: #128c3f; background: rgba(37, 211, 102, .12); border-color: #9be7b4; }
.conversas-link-wa.active { color: #128c3f; background: rgba(37, 211, 102, .14); border-color: #9be7b4; }
/* Sino de Tarefas — laranja, no mesmo molde do ícone do WhatsApp. É o único
   ícone da barra que cobra ação, então destoa de propósito. */
/* Canal de denúncia — vermelho (`--danger`, que tem tom próprio no escuro):
   4,81:1 sobre a pílula no claro e 4,64:1 no escuro. */
.conversas-link-den { color: var(--danger); padding: .42rem .5rem; }
.conversas-link-den:hover,
.conversas-link-den.active { color: var(--danger); background: var(--danger-soft); border-color: var(--danger); }
.conversas-link-tf { color: #d97706; padding: .42rem .5rem; }
.conversas-link-tf:hover { color: #b45309; background: rgba(217, 119, 6, .12); border-color: #fbbf77; }
.conversas-link-tf.active { color: #b45309; background: rgba(217, 119, 6, .14); border-color: #fbbf77; }
.nav-badge.nav-badge-tf { background: #d97706; }
.conversas-link .ts-icon { display: inline-flex; }
.conversas-link .nav-badge { position: static; margin-left: .05rem; }
@media (max-width: 640px) { .conversas-link .conversas-label { display: none; } }
.ai-toggle {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .8rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 55%, #0ea5e9 100%);
    box-shadow: 0 2px 10px rgba(79, 70, 229, .45);
    transition: transform .15s, box-shadow .15s, filter .15s;
}
.ai-toggle:hover { filter: brightness(1.06); box-shadow: 0 4px 16px rgba(79, 70, 229, .6); transform: translateY(-1px); }
.ai-toggle .ai-icon { display: inline-flex; color: #fef9c3; animation: ai-twinkle 1.8s ease-in-out infinite; }
.ai-toggle .caret { font-size: .7rem; opacity: .85; }

/* Destaque animado do botão Aninha: pulse (anel que expande e some) */
.topstrip-ai { position: relative; display: inline-flex; }
.topstrip-ai::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    z-index: 0;
    pointer-events: none;
    animation: ai-pulse 1.8s ease-out infinite;
}
@keyframes ai-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(124, 58, 237, .55); }
    70%  { box-shadow: 0 0 0 10px rgba(124, 58, 237, 0); }
    100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
}
@keyframes ai-twinkle {
    0%, 100% { opacity: .7; transform: scale(.9) rotate(0deg); }
    50%      { opacity: 1;  transform: scale(1.18) rotate(14deg); }
}
@media (prefers-reduced-motion: reduce) {
    .topstrip-ai::before, .ai-toggle .ai-icon { animation: none; }
}
.ai-item { display: flex; flex-direction: column; gap: .1rem; }
.ai-item-title { font-weight: 600; color: var(--text); }
.ai-item-desc { font-size: .78rem; color: var(--muted); }
.ai-item:hover .ai-item-title { color: var(--text); }

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    /* Degradê azul → verde. É `background-image` e não a forma curta
       `background`: a curta zera a imagem, e é justamente ela que o modo
       escuro usa para trocar a barra por um cinza chapado. */
    background-image: linear-gradient(to right, #1552d0, #00af52);
    border-bottom: 1px solid rgba(0, 0, 0, .15);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
}
/* Menu sobre fundo escuro (#632324): texto claro */
.topbar-inner-menu .topnav-link { color: rgba(255, 255, 255, .85); }
.topbar-inner-menu .topnav-link:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.topbar-inner-menu .topnav-link.active { color: #fff; background: rgba(255, 255, 255, .18); }
.topbar-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .65rem 1.25rem;
}
/* Barra de menu: apenas o menu, centralizado. Mais largura p/ caber mais itens.
   IMPORTANTE: sem overflow aqui — senão recorta os dropdowns dos submenus. */
.topbar-inner-menu {
    justify-content: center;
    max-width: 1480px;
    padding-inline: 1rem;
}
/* Deixa quebrar para uma 2ª linha só se realmente não couber (sem cortar submenu). */
.topbar-inner-menu .topnav { flex-wrap: wrap; justify-content: center; margin-left: 0; row-gap: .25rem; }

.topbar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    color: var(--text);
}
.topbar-brand .brand-mark { width: 34px; height: 34px; border-radius: 9px; font-size: 1rem; }
.topbar-brand .brand-name { font-weight: 700; }

.topnav {
    display: flex;
    align-items: center;
    gap: .1rem;
    margin-left: .75rem;
}
.topnav-link {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    padding: .45rem .68rem;
    border-radius: 8px;
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--muted);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.topnav-link:hover { color: var(--text); background: rgba(16, 24, 40, .05); }
.topnav-link.active { color: var(--primary); background: var(--primary-soft); }

/* Balão de mensagens não lidas no menu */
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
}
.nav-badge[hidden] { display: none; }
.caret { font-size: .58rem; opacity: .65; margin-left: -.08rem; }

/* Dropdown (CSS puro: abre no hover e no foco/click) */
.dropdown { position: relative; }
.dropdown-menu {
    position: absolute;
    top: calc(100% + .45rem);
    left: 0;
    min-width: 210px;
    padding: .4rem;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .15s, transform .15s, visibility .15s;
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    z-index: 9999;
}
.dropdown-item {
    display: block;
    padding: .55rem .7rem;
    border-radius: 8px;
    font-size: .9rem;
    color: var(--muted);
    text-decoration: none;
}
.dropdown-item:hover { background: rgba(16, 24, 40, .05); color: var(--text); }
.dropdown-item.active { color: var(--primary); background: var(--primary-soft); }

/* Submenu aninhado (ex.: Jurídico → Auditoria), abre para o lado */
.dropdown-sub { position: relative; }
.dropdown-sub-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.dropdown-sub-toggle .caret-right { font-size: .7rem; color: var(--muted); }
.dropdown-submenu {
    position: absolute;
    top: -.4rem;
    left: 100%;
    min-width: 280px;
    padding: .4rem;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-6px);
    transition: opacity .15s, transform .15s, visibility .15s;
}
.dropdown-sub:hover .dropdown-submenu,
.dropdown-sub:focus-within .dropdown-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.topbar-user {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .7rem;
}
/* Mais escuro e um pouco mais firme que antes: dentro do chip o nome é o
   conteúdo principal, não uma legenda. */
.topbar-username { font-size: .88rem; color: var(--text); font-weight: 600; }
.avatar-sm { width: 34px; height: 34px; font-size: .9rem; }
.btn-sm { width: auto; padding: .45rem .85rem; font-size: .85rem; }

/* Conteúdo das páginas autenticadas */
.app-main {
    width: 100%;
    max-width: 1700px;
    margin: 0 auto;
    padding: 2rem 1.25rem;
}
.page-head { margin-bottom: 1.75rem; }
.page-head h1 { margin: 0 0 .3rem; font-size: 1.6rem; letter-spacing: -.02em; }
.page-head p { margin: 0; color: var(--muted); }

.card {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--card-border);
}
.settings-row:last-child { border-bottom: none; }
.settings-label { color: var(--muted); font-size: .9rem; }
.settings-value { font-weight: 600; text-align: right; }

body.has-nav .app-footer {
    text-align: center;
    padding: 1.5rem;
}

/* Menu do usuário (trigger clicável) */
.topbar-user.dropdown { margin-left: auto; }
/* Chip do usuário: pílula com borda visível, avatar encostado na borda
   esquerda e o nome à direita. A borda é permanente (antes só aparecia no
   foco) — é o que faz o conjunto ser lido como um botão, e não como texto
   solto ao lado de uma foto. */
.user-trigger {
    display: flex;
    align-items: center;
    gap: .45rem;
    /* 3px à esquerda: o avatar quase toca a borda, como no modelo. */
    padding: 3px .85rem 3px 3px;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 999px;
    color: var(--text);
    font: inherit;
    cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.user-trigger .avatar-sm { width: 30px; height: 30px; font-size: .82rem; }
.user-trigger:hover { background: var(--surface); border-color: var(--muted); }
.dropdown:focus-within .user-trigger { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

.dropdown-menu.right { left: auto; right: 0; }
/* Separador e rótulo dentro do dropdown (ex.: seção Sistema no menu do avatar) */
.dropdown-sep { height: 1px; background: var(--card-border); margin: .35rem 0; }
.dropdown-label { padding: .2rem .7rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

/* Sistema — hub de módulos em cards */
.sys-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin-top: 1rem; }
.sys-card {
    display: flex; align-items: center; gap: .9rem;
    padding: 1rem 1.1rem; background: var(--card); border: 1px solid var(--card-border);
    border-radius: var(--radius); box-shadow: var(--shadow);
    color: inherit; text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.sys-card:hover { border-color: var(--primary); box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-2px); }
.sys-card-ico {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
    display: grid; place-items: center;
    background: var(--primary-soft); color: var(--primary);
}
.sys-card-ico svg { width: 22px; height: 22px; }
.sys-card-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.sys-card-title { font-weight: 700; font-size: 1rem; color: var(--text, inherit); }
.sys-card-desc { font-size: .82rem; color: var(--muted); line-height: 1.35; }
.sys-card-arrow { flex: 0 0 auto; color: var(--muted); transition: color .15s, transform .15s; }
.sys-card:hover .sys-card-arrow { color: var(--primary); transform: translateX(3px); }

/* Perfis — seletor de ações no "aplicar em massa" */
.perm-actions-pick { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; }
.perm-actions-pick .check[hidden] { display: none; }

.dropdown-form { margin: 0; }
.dropdown-item-danger {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    color: var(--danger);
}
.dropdown-item-danger:hover { background: var(--danger-soft); color: #b42318; }

/* Perfil */
.avatar-lg { width: 64px; height: 64px; font-size: 1.5rem; border-radius: 16px; }

/* Foto do usuário (avatar como imagem) */
.avatar-img { object-fit: cover; padding: 0; display: block; }
.profile-photo-actions { display: flex; align-items: center; gap: .7rem; margin-top: .7rem; flex-wrap: wrap; }
.profile-photo-btn { cursor: pointer; display: inline-flex; align-items: center; }
.profile-photo-btn:hover { background: rgba(16, 24, 40, .05); }
.profile-top {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.25rem;
    margin-bottom: .5rem;
    border-bottom: 1px solid var(--card-border);
}
.profile-name { font-size: 1.2rem; font-weight: 700; }
.profile-email { color: var(--muted); font-size: .92rem; }

/* Logo (menu e login) */
.brand-logo { height: 34px; width: auto; max-width: 190px; display: block; border-radius: 6px; }
.brand-logo-lg { height: 56px; max-width: 240px; margin-bottom: .25rem; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 1rem; }
@media (max-width: 760px) {
    .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
    .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---------- Abas (CSS puro via radio) ---------- */
.tabs .tab-radio { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.tab-bar {
    display: flex;
    flex-wrap: wrap;              /* Configurações tem 10 abas — precisa quebrar linha */
    gap: .35rem;
    margin: -.25rem 0 1.25rem;
    padding: .3rem;
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: 12px;
}
.tab-bar .tab {
    padding: .5rem 1rem;
    font-weight: 600;
    font-size: .9rem;
    color: var(--muted);
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 9px;
    user-select: none;
    transition: background .15s, color .15s, border-color .15s;
}
.tab-bar .tab:hover { color: var(--primary); background: var(--card); border-color: var(--card-border); }
.tab-panel { display: none; }
#tab-site:checked ~ .tab-bar label[for="tab-site"],
#tab-smtp:checked ~ .tab-bar label[for="tab-smtp"],
#tab-ia:checked ~ .tab-bar label[for="tab-ia"],
#tab-persona:checked ~ .tab-bar label[for="tab-persona"],
#tab-atendimento:checked ~ .tab-bar label[for="tab-atendimento"],
#tab-css:checked ~ .tab-bar label[for="tab-css"],
#tab-atalhos:checked ~ .tab-bar label[for="tab-atalhos"],
#tab-politica:checked ~ .tab-bar label[for="tab-politica"],
#tab-boletos:checked ~ .tab-bar label[for="tab-boletos"],
#tab-whatsapp:checked ~ .tab-bar label[for="tab-whatsapp"],
#tab-financeiro:checked ~ .tab-bar label[for="tab-financeiro"],
#tab-perfil:checked ~ .tab-bar label[for="tab-perfil"],
#tab-banco:checked ~ .tab-bar label[for="tab-banco"],
#tab-redes:checked ~ .tab-bar label[for="tab-redes"],
#tab-assinatura:checked ~ .tab-bar label[for="tab-assinatura"],
#tab-integracoes:checked ~ .tab-bar label[for="tab-integracoes"],
#tab-seguranca:checked ~ .tab-bar label[for="tab-seguranca"],
#tab-fdados:checked ~ .tab-bar label[for="tab-fdados"],
#tab-fpv:checked ~ .tab-bar label[for="tab-fpv"],
#tab-fdoc:checked ~ .tab-bar label[for="tab-fdoc"],
#tab-fdep:checked ~ .tab-bar label[for="tab-fdep"],
#tab-frem:checked ~ .tab-bar label[for="tab-frem"],
#tab-fhist:checked ~ .tab-bar label[for="tab-fhist"],
#tab-fcomp:checked ~ .tab-bar label[for="tab-fcomp"],
#tab-rhp:checked ~ .tab-bar label[for="tab-rhp"],
#tab-rhc:checked ~ .tab-bar label[for="tab-rhc"],
#tab-rht:checked ~ .tab-bar label[for="tab-rht"],
#tab-rhb:checked ~ .tab-bar label[for="tab-rhb"],
#tab-pefin:checked ~ .tab-bar label[for="tab-pefin"],
#tab-serasast:checked ~ .tab-bar label[for="tab-serasast"],
#tab-spc:checked ~ .tab-bar label[for="tab-spc"],
#tab-mailbox:checked ~ .tab-bar label[for="tab-mailbox"],
#tab-cartorio:checked ~ .tab-bar label[for="tab-cartorio"],
#tab-negmemb:checked ~ .tab-bar label[for="tab-negmemb"],
#tab-pdados:checked ~ .tab-bar label[for="tab-pdados"],
#tab-pmov:checked ~ .tab-bar label[for="tab-pmov"],
#tab-pman:checked ~ .tab-bar label[for="tab-pman"],
#tab-pdoc:checked ~ .tab-bar label[for="tab-pdoc"],
#tab-phist:checked ~ .tab-bar label[for="tab-phist"],
#tab-apicurl:checked ~ .tab-bar label[for="tab-apicurl"],
#tab-apiphp:checked ~ .tab-bar label[for="tab-apiphp"],
#tab-apipython:checked ~ .tab-bar label[for="tab-apipython"],
#tab-apinode:checked ~ .tab-bar label[for="tab-apinode"],
#tab-apics:checked ~ .tab-bar label[for="tab-apics"],
/* Matriz de Perfis: uma aba por GRUPO de módulos. ⚠️ Os ids são INDEXADOS
   (`pf0`..`pf23`) e não derivados do nome do grupo, porque os grupos vêm do
   `config/modules.php` e mudam — id gerado de nome novo não teria regra aqui e
   a aba simplesmente não abriria. Hoje são 15 grupos; passando de 24, a view
   desiste das abas e mostra a matriz corrida (ver `MAX_ABAS` em perfis/edit). */
#tab-pf0:checked ~ .tab-bar label[for="tab-pf0"],
#tab-pf1:checked ~ .tab-bar label[for="tab-pf1"],
#tab-pf2:checked ~ .tab-bar label[for="tab-pf2"],
#tab-pf3:checked ~ .tab-bar label[for="tab-pf3"],
#tab-pf4:checked ~ .tab-bar label[for="tab-pf4"],
#tab-pf5:checked ~ .tab-bar label[for="tab-pf5"],
#tab-pf6:checked ~ .tab-bar label[for="tab-pf6"],
#tab-pf7:checked ~ .tab-bar label[for="tab-pf7"],
#tab-pf8:checked ~ .tab-bar label[for="tab-pf8"],
#tab-pf9:checked ~ .tab-bar label[for="tab-pf9"],
#tab-pf10:checked ~ .tab-bar label[for="tab-pf10"],
#tab-pf11:checked ~ .tab-bar label[for="tab-pf11"],
#tab-pf12:checked ~ .tab-bar label[for="tab-pf12"],
#tab-pf13:checked ~ .tab-bar label[for="tab-pf13"],
#tab-pf14:checked ~ .tab-bar label[for="tab-pf14"],
#tab-pf15:checked ~ .tab-bar label[for="tab-pf15"],
#tab-pf16:checked ~ .tab-bar label[for="tab-pf16"],
#tab-pf17:checked ~ .tab-bar label[for="tab-pf17"],
#tab-pf18:checked ~ .tab-bar label[for="tab-pf18"],
#tab-pf19:checked ~ .tab-bar label[for="tab-pf19"],
#tab-pf20:checked ~ .tab-bar label[for="tab-pf20"],
#tab-pf21:checked ~ .tab-bar label[for="tab-pf21"],
#tab-pf22:checked ~ .tab-bar label[for="tab-pf22"],
#tab-pf23:checked ~ .tab-bar label[for="tab-pf23"],
/* Sistema → Financeiro. ⚠️ Prefixo `fn` porque `#tab-financeiro` (Configurações)
   e `#tab-banco` (Perfil) já existem — id de aba é global neste arquivo. */
#tab-fnemp:checked ~ .tab-bar label[for="tab-fnemp"],
#tab-fnpla:checked ~ .tab-bar label[for="tab-fnpla"],
#tab-fncc:checked ~ .tab-bar label[for="tab-fncc"],
#tab-fnban:checked ~ .tab-bar label[for="tab-fnban"],
/* Sistema → Aninha Adv Virtual */
#tab-japer:checked ~ .tab-bar label[for="tab-japer"],
#tab-jaarq:checked ~ .tab-bar label[for="tab-jaarq"],
#tab-jasit:checked ~ .tab-bar label[for="tab-jasit"],
#tab-jaaju:checked ~ .tab-bar label[for="tab-jaaju"],
/* Sistema → Aninha */
#tab-annom:checked ~ .tab-bar label[for="tab-annom"],
#tab-anper:checked ~ .tab-bar label[for="tab-anper"],
#tab-anarq:checked ~ .tab-bar label[for="tab-anarq"],
#tab-ansit:checked ~ .tab-bar label[for="tab-ansit"],
#tab-anwa:checked ~ .tab-bar label[for="tab-anwa"],
#tab-bkst:checked ~ .tab-bar label[for="tab-bkst"],
#tab-bkmn:checked ~ .tab-bar label[for="tab-bkmn"],
#tab-annum:checked ~ .tab-bar label[for="tab-annum"],
#tab-chamados:checked ~ .tab-bar label[for="tab-chamados"] {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
#tab-site:checked ~ .panel-site { display: block; }
#tab-pf0:checked ~ .panel-pf0 { display: block; }
#tab-pf1:checked ~ .panel-pf1 { display: block; }
#tab-pf2:checked ~ .panel-pf2 { display: block; }
#tab-pf3:checked ~ .panel-pf3 { display: block; }
#tab-pf4:checked ~ .panel-pf4 { display: block; }
#tab-pf5:checked ~ .panel-pf5 { display: block; }
#tab-pf6:checked ~ .panel-pf6 { display: block; }
#tab-pf7:checked ~ .panel-pf7 { display: block; }
#tab-pf8:checked ~ .panel-pf8 { display: block; }
#tab-pf9:checked ~ .panel-pf9 { display: block; }
#tab-pf10:checked ~ .panel-pf10 { display: block; }
#tab-pf11:checked ~ .panel-pf11 { display: block; }
#tab-pf12:checked ~ .panel-pf12 { display: block; }
#tab-pf13:checked ~ .panel-pf13 { display: block; }
#tab-pf14:checked ~ .panel-pf14 { display: block; }
#tab-pf15:checked ~ .panel-pf15 { display: block; }
#tab-pf16:checked ~ .panel-pf16 { display: block; }
#tab-pf17:checked ~ .panel-pf17 { display: block; }
#tab-pf18:checked ~ .panel-pf18 { display: block; }
#tab-pf19:checked ~ .panel-pf19 { display: block; }
#tab-pf20:checked ~ .panel-pf20 { display: block; }
#tab-pf21:checked ~ .panel-pf21 { display: block; }
#tab-pf22:checked ~ .panel-pf22 { display: block; }
#tab-pf23:checked ~ .panel-pf23 { display: block; }
#tab-fnemp:checked ~ .panel-fnemp { display: block; }
#tab-fnpla:checked ~ .panel-fnpla { display: block; }
#tab-fncc:checked  ~ .panel-fncc  { display: block; }
#tab-fnban:checked ~ .panel-fnban { display: block; }
#tab-japer:checked ~ .panel-japer { display: block; }
#tab-jaarq:checked ~ .panel-jaarq { display: block; }
#tab-jasit:checked ~ .panel-jasit { display: block; }
#tab-jaaju:checked ~ .panel-jaaju { display: block; }
#tab-annom:checked ~ .panel-annom { display: block; }
#tab-anper:checked ~ .panel-anper { display: block; }
#tab-anarq:checked ~ .panel-anarq { display: block; }
#tab-ansit:checked ~ .panel-ansit { display: block; }
#tab-anwa:checked ~ .panel-anwa { display: block; }
#tab-bkst:checked ~ .panel-bkst { display: block; }
#tab-bkmn:checked ~ .panel-bkmn { display: block; }
#tab-annum:checked ~ .panel-annum { display: block; }
#tab-apicurl:checked ~ .panel-apicurl { display: block; }
#tab-apiphp:checked ~ .panel-apiphp { display: block; }
#tab-apipython:checked ~ .panel-apipython { display: block; }
#tab-apinode:checked ~ .panel-apinode { display: block; }
#tab-apics:checked ~ .panel-apics { display: block; }
#tab-smtp:checked ~ .panel-smtp { display: block; }
#tab-ia:checked ~ .panel-ia { display: block; }
#tab-persona:checked ~ .panel-persona { display: block; }
#tab-atendimento:checked ~ .panel-atendimento { display: block; }
#tab-chamados:checked ~ .panel-chamados { display: block; }
#tab-politica:checked ~ .panel-politica { display: block; }
#tab-atalhos:checked ~ .panel-atalhos { display: block; }
#tab-css:checked ~ .panel-css { display: block; }
#tab-boletos:checked ~ .panel-boletos { display: block; }
#tab-whatsapp:checked ~ .panel-whatsapp { display: block; }
#tab-financeiro:checked ~ .panel-financeiro { display: block; }
#tab-perfil:checked ~ .panel-perfil { display: block; }
#tab-banco:checked ~ .panel-banco { display: block; }
#tab-redes:checked ~ .panel-redes { display: block; }
#tab-assinatura:checked ~ .panel-assinatura { display: block; }
#tab-integracoes:checked ~ .panel-integracoes { display: block; }
#tab-seguranca:checked ~ .panel-seguranca { display: block; }
#tab-fdados:checked ~ .panel-fdados { display: block; }
#tab-fpv:checked ~ .panel-fpv { display: block; }
#tab-fdoc:checked ~ .panel-fdoc { display: block; }
#tab-fdep:checked ~ .panel-fdep { display: block; }
#tab-frem:checked ~ .panel-frem { display: block; }
#tab-fhist:checked ~ .panel-fhist { display: block; }
#tab-fcomp:checked ~ .panel-fcomp { display: block; }
#tab-rhp:checked ~ .panel-rhp { display: block; }
#tab-rhc:checked ~ .panel-rhc { display: block; }
#tab-rht:checked ~ .panel-rht { display: block; }
#tab-rhb:checked ~ .panel-rhb { display: block; }
#tab-pefin:checked ~ .panel-pefin { display: block; }
#tab-serasast:checked ~ .panel-serasast { display: block; }
#tab-spc:checked ~ .panel-spc { display: block; }
#tab-mailbox:checked ~ .panel-mailbox { display: block; }
#tab-cartorio:checked ~ .panel-cartorio { display: block; }
#tab-negmemb:checked ~ .panel-negmemb { display: block; }
/* Ficha do bem (ADM → Patrimônio) */
#tab-pdados:checked ~ .panel-pdados { display: block; }
#tab-pmov:checked ~ .panel-pmov { display: block; }
#tab-pman:checked ~ .panel-pman { display: block; }
#tab-pdoc:checked ~ .panel-pdoc { display: block; }
#tab-phist:checked ~ .panel-phist { display: block; }

.persona-textarea {
    width: 100%;
    padding: .85rem .95rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: 11px;
    outline: none;
    resize: vertical;
    min-height: 220px;
}
.persona-textarea:focus {
    border-color: var(--primary);
    background: var(--card);
    box-shadow: 0 0 0 4px var(--ring);
}

/* ---------- Aba IA Config ---------- */
.field-label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: .55rem;
}
.field-note { font-weight: 400; opacity: .8; }

.provider-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin-bottom: 1.4rem;
}
@media (max-width: 560px) { .provider-choice { grid-template-columns: 1fr; } }

.provider-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    border: 1.5px solid var(--card-border);
    border-radius: 13px;
    cursor: pointer;
    background: var(--card);
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.provider-card input { position: absolute; opacity: 0; pointer-events: none; }
.provider-card:hover { background: var(--surface); }
.provider-card:has(input:checked) {
    border-color: var(--primary);
    background: var(--primary-soft);
    box-shadow: 0 0 0 3px var(--ring);
}
.provider-badge {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 11px;
    font-weight: 800; font-size: 1.15rem;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
}
.provider-badge.openai { background: linear-gradient(135deg, #10a37f, #0d8065); }
.provider-text { display: flex; flex-direction: column; line-height: 1.3; }
.provider-text strong { font-size: 1rem; }
.provider-text small { color: var(--muted); font-size: .8rem; }
.provider-tick {
    margin-left: auto;
    flex: 0 0 auto;
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 2px solid var(--card-border);
    display: grid; place-items: center;
    transition: border-color .15s, background .15s;
}
.provider-card:has(input:checked) .provider-tick {
    border-color: var(--primary);
    background: var(--primary);
}
.provider-card:has(input:checked) .provider-tick::after {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--card);
}

.ai-group {
    border: 1px solid var(--card-border);
    border-radius: 13px;
    padding: 1rem 1.1rem .5rem;
    margin: 0 0 1.1rem;
    background: var(--surface);
}
.ai-group legend {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: 0 .5rem;
    font-size: .78rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ai-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--primary);
    display: inline-block;
}
.ai-dot.openai { background: #10a37f; }
.ai-group .field select,
.ai-group .field input { background: var(--card); }

/* ---------- Upload de imagens ---------- */
.upload-field {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--card-border);
    margin-bottom: 1rem;
}
.upload-preview {
    flex: 0 0 auto;
    width: 96px;
    height: 64px;
    display: grid;
    place-items: center;
    background: var(--surface);
    border: 1px dashed var(--card-border);
    border-radius: 11px;
    overflow: hidden;
}
.upload-preview-sm { width: 64px; height: 64px; }

/* Progresso do envio da logo/favicon (configuracoes-site.js). A largura da
   barra é aplicada por CSSOM — a CSP proíbe o atributo style, não a
   propriedade. */
.site-envio { display: flex; align-items: center; gap: .6rem; margin: .8rem 0 .4rem; }
.site-barra {
    flex: 1 1 auto; height: 6px; border-radius: 999px;
    background: var(--primary-soft); overflow: hidden;
}
.site-barra-fill {
    width: 0; height: 100%; background: var(--primary);
    transition: width .15s linear;
}
.upload-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.upload-empty { color: #9aa4b2; font-size: .78rem; }
.upload-info { flex: 1; }
.upload-info label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .2rem; }
.hint { color: var(--muted); font-size: .82rem; margin: 0 0 .5rem; }
input[type="file"] {
    width: 100%;
    font-size: .85rem;
    color: var(--muted);
}
input[type="file"]::file-selector-button {
    margin-right: .7rem;
    padding: .5rem .8rem;
    border: 1px solid var(--card-border);
    border-radius: 9px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-size: .85rem;
}
input[type="file"]::file-selector-button:hover { background: #eef1f6; }

/* ---------- Caixa de teste SMTP ---------- */
.test-box {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--card-border);
}
.test-box h3 { margin: 0 0 .3rem; font-size: 1rem; }
.test-form { display: flex; gap: .6rem; align-items: stretch; }
.test-form input {
    flex: 1;
    padding: .7rem .9rem;
    font-size: .95rem;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: 11px;
    outline: none;
}
.test-form input:focus { border-color: var(--primary); background: var(--card); box-shadow: 0 0 0 4px var(--ring); }
.test-form .btn-ghost { flex: 0 0 auto; }
@media (max-width: 480px) { .test-form { flex-direction: column; } }

/* Log de depuração SMTP */
.smtp-debug {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--card-border);
}
.smtp-debug-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
}
.smtp-debug-head h3 { margin: 0; font-size: 1rem; }
.smtp-debug-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
#smtp-debug-toggle.is-on {
    color: var(--success);
    border-color: rgba(18, 161, 80, .4);
    background: rgba(18, 161, 80, .08);
}
.smtp-log {
    margin: .7rem 0 0;
    max-height: 300px;
    overflow: auto;
    background: #14100f;
    color: #d8e6c9;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: .85rem .95rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .78rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 640px) {
    .topbar-inner { gap: .5rem; padding: .55rem .85rem; }
    .topbar-brand .brand-name { display: none; }
    .topbar-username { display: none; }
    /* Sem o nome, o chip precisa voltar a ser redondo — com o padding de
       texto ele viraria uma cápsula com um vazio à direita.
       ⚠️ O NOC se exclui logo abaixo: lá o nome continua visível no celular. */
    .user-trigger { padding: 3px; gap: .2rem; }
    .noc-user-trigger { padding: 3px .85rem 3px 3px; gap: .45rem; }
    .topnav { margin-left: .25rem; gap: 0; }
    .topnav-link { padding: .45rem .55rem; font-size: .85rem; }
    .app-main { padding: 1.5rem 1rem; }
    .topstrip-inner { padding: .3rem .85rem; }
    .ai-toggle .ai-label { display: none; }
    .ai-toggle { padding: .4rem .6rem; }
}

/* ---------- Página de usuários (tabela + modal) ---------- */
.page-head-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.table-wrap { overflow-x: auto; border-radius: var(--radius); }
/*
 * ⚠️⚠️ ALGARISMOS TABULARES em toda tabela de dados. **Não é acabamento — é
 * função.** Na fonte do sistema o "1" é mais estreito que o "8", então uma
 * coluna de valores em R$ não alinha na vírgula e conferir um lote de títulos
 * passa a exigir ler número por número em vez de bater o olho na coluna. O
 * mesmo vale para data, hora, CPF, protocolo e contagem — tudo que numa tabela
 * é comparado verticalmente.
 *
 * Custo zero: os glifos de largura fixa já existem nas fontes do sistema, não
 * há download nenhum. `font-feature-settings` acompanha por causa de motores
 * antigos que não entendem a propriedade de alto nível.
 *
 * Fica no `.table` (e não em cada célula numérica) porque texto também melhora:
 * uma coluna "9.412/9.412" ao lado de "1.111/1.111" só fica legível assim.
 */
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
/*
 * ⚠️ LINK DENTRO DE TABELA não é sublinhado. Não havia regra nenhuma para
 * `.table a`, então o navegador aplicava o padrão dele — azul e sublinhado —
 * em TODA linha. Numa fila de chamados ou numa carteira de 2.800 pessoas isso
 * são dezenas de sublinhados competindo com o conteúdo, e a coluna vira uma
 * mancha listrada.
 *
 * ⚠️ Cor sozinha não pode ser o único sinal de que é clicável (quem não
 * distingue as cores fica sem pista): o peso maior acompanha, e o sublinhado
 * volta no hover e no foco pelo teclado.
 */
.table a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}
.table a:hover,
.table a:focus-visible { text-decoration: underline; }
/* Botão dentro da célula (Abrir, Ver, Baixar) já tem forma própria — não vira
   link colorido. */
.table a.btn, .table a.btn-ghost, .table a.btn-sm {
    color: inherit;
    text-decoration: none;
}
.table a.btn { color: #fff; }

/*
 * ⚠️ Dinheiro e contagem NÃO QUEBRAM LINHA. Sem isto "R$ 4.820,55" vira "R$"
 * numa linha e "4.820,55" na seguinte quando a coluna aperta — foi o que
 * aconteceu na Carteira, justamente na coluna que a operação usa para conferir
 * soma. O `tabular-nums` alinha os dígitos; isto impede que eles se separem do
 * símbolo.
 */
.table .ta-right { white-space: nowrap; }

.table thead th {
    text-align: left;
    padding: .85rem 1rem;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    background: var(--surface);
    border-bottom: 1px solid var(--card-border);
    white-space: nowrap;
}
/* O cabeçalho segue o alinhamento que a célula declara. `.table thead th`
   (0,1,2) vencia o `.ta-right`/`.ta-center` (0,1,0), e todo título de coluna
   numérica saía à esquerda, longe dos números alinhados à direita embaixo. */
.table thead th.ta-right { text-align: right; }
.table thead th.ta-center { text-align: center; }
.table tbody td {
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--card-border);
    vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--surface); }
.ta-right { text-align: right; }
.empty-row { text-align: center; color: var(--muted); padding: 2rem 1rem; }

.pill { display: inline-block; padding: .2rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.pill-ok { color: var(--success); background: rgba(18, 161, 80, .12); }
.pill-off { color: var(--danger); background: var(--danger-soft); }
.pill-muted { color: var(--muted); background: rgba(105, 117, 134, .12); }
/* Bloqueio por tentativas de login: âmbar, e não vermelho, porque é estado
   TEMPORÁRIO (passa sozinho ao fim da janela) — e porque divide a célula com o
   "Inativo", que já é o selo vermelho ali. */
.pill-lock { color: #b7791a; background: #fff6e0; }
/*
 * Envio de operadora já baixado pela equipe (mig. 114). Azul de propósito: fica
 * ENTRE o cinza de "esperando" e o verde de "processada", e o vermelho já é o
 * erro. Define a PRÓPRIA cor de texto, então sobrevive ao modo escuro sem regra
 * extra (medido: 4,82:1). Regra do bloco escuro: superfície clara que não
 * declara a própria tinta é a que some.
 */
.pill-baixado { color: #1a63d6; background: #e7f0ff; }
/* Em preparação: aprovado, importando em segundo plano. Define a própria tinta (sobrevive ao escuro). */
.pill-preparacao { color: #92400e; background: #fef3c7; }
/* Sistema → VoIP: a lista de conferências do botão Testar. */
/* ---------- Softphone (janela do tele atendente) ---------- */
/* ---------------------------------------------------------------
   SOFTPHONE (janela separada, layouts/call_slim)

   ⚠️⚠️ A tela e organizada pelo ESTADO. Quem esta com o fone precisa responder
   "estou recebendo ligacao?" e "o que eu faco agora?" num olhar -- a versao
   anterior respondia as duas com um selo de 12px no canto, enquanto dois tercos
   da janela eram log tecnico.

   ⚠️ A COR do estado e ACENTO (ponto + borda de topo), nunca o unico sinal: o
   texto diz o estado por extenso. Todas as cores abaixo foram MEDIDAS contra o
   --card dos dois modos, com o piso de 3:1 de elemento de UI.
   --------------------------------------------------------------- */
.sf-body { background: var(--surface); }
.sf-main { padding: 1rem; display: grid; gap: .75rem; align-content: start; }

/* --- o painel de estado --- */
.sf-painel {
    position: relative;
    border: 1px solid var(--card-border);
    border-top: 3px solid var(--sf-cor);
    border-radius: var(--radius);
    background: var(--card);
    padding: 1.1rem 1rem 1rem;
    display: grid;
    gap: .5rem;
    justify-items: center;
    text-align: center;
}

/* ⚠️ `--sf-cor` e o ponto unico da cor do estado: o JS troca a CLASSE do painel
   e tudo (ponto, borda, brilho) acompanha. Espalhada por seletor, a cor nova
   ficaria faltando em um dos tres. */
.sf-painel            { --sf-cor: #8a7a79; }   /* 4,09 claro · 4,19 escuro */
.sf-painel.is-disponivel { --sf-cor: #15a05c; }   /* 3,38 · 5,06 */
.sf-painel.is-pausado    { --sf-cor: #c97612; }   /* 3,45 · 4,95 -- o #d98218 obvio reprova no claro (2,93) */
.sf-painel.is-tocando    { --sf-cor: #3b82f6; }   /* 3,68 · 4,65 */
.sf-painel.is-em_ligacao { --sf-cor: #3b82f6; }
.sf-painel.is-pos        { --sf-cor: #8b5cf6; }   /* 4,23 · 4,04 */
.sf-painel.is-erro       { --sf-cor: #e0564f; }   /* 3,74 · 4,57 */

.sf-ponto {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--sf-cor);
    /* O anel usa a propria cor com alfa -- some junto quando a cor muda. */
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--sf-cor) 22%, transparent);
}
@supports not (color-mix(in srgb, red 50%, transparent)) {
    .sf-ponto { box-shadow: none; }
}

/* ⚠️ Pulsa SO em disponivel e tocando. Movimento constante numa janela aberta o
   dia inteiro vira ruido -- fica reservado para "algo acontece agora". */
.sf-painel.is-disponivel .sf-ponto,
.sf-painel.is-tocando .sf-ponto { animation: sf-pulso 1.6s ease-out infinite; }
@keyframes sf-pulso {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sf-cor) 45%, transparent); }
    70%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--sf-cor) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sf-cor) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
    .sf-painel .sf-ponto { animation: none !important; }
}

/* ⚠️ O texto do estado usa `--text`, nao a cor do estado: em 1,35rem uma cor de
   acento nao alcanca os 4,5:1 de texto. A cor fica no ponto e na borda. */
.sf-estado-txt { margin: 0; font-size: 1.35rem; line-height: 1.2; color: var(--text); letter-spacing: -.01em; }
.sf-explica    { margin: 0; font-size: .85rem; color: var(--muted); max-width: 30ch; }

/* --- a chamada --- */
.sf-chamada { display: grid; gap: .15rem; justify-items: center; margin-top: .2rem; }
.sf-numero {
    margin: 0; font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em;
    /* Tabular para o numero nao "dancar" enquanto os digitos chegam. */
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
.sf-quem { margin: 0; color: var(--muted); font-size: .9rem; }
.sf-cronometro {
    margin: .15rem 0 0; font-size: 1rem; color: var(--muted);
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}

/* --- acoes --- */
/* ⚠️ UM lugar so para os botoes; o JS mostra os do estado. Espalhados em tres
   blocos (era assim), a acao principal mudava de posicao a cada estado. */
.sf-acoes { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: .35rem; }
.sf-btn { width: auto; min-width: 9.5rem; padding: .6rem 1.1rem; font-size: .95rem; }

/* ⚠️ REDE, nao correcao ativa: hoje todo botao primario desta tela usa
   `.sf-btn-ok` (verde), entao esta regra nao pinta nada. Ela existe para o dia
   em que alguem acrescentar aqui um `.btn` puro -- no modo escuro o `--primary`
   e CLAREADO (`color-mix` 68% + branco -> #ba7676) e branco sobre esse rosa
   mede **3,53:1**, reprova AA. Com #2a1010 da 5,03:1, a mesma correcao ja
   aplicada na aba de filtro ativa.

   ⚠️ O escopo e so o softphone: `.btn` tem o mesmo defeito em TODO botao
   primario do sistema no escuro, e troca-lo e decisao de produto -- esta no
   CLAUDE.md como pendente, nao como esquecimento. */
body.tema-escuro .btn.sf-btn { color: #2a1010; }
body.tema-escuro .btn.sf-btn.sf-btn-ok { color: #fff; }   /* o verde passa com branco (5,39:1) */
/* ⚠️⚠️ Verde do BOTAO (#0f7a46) e mais escuro que o verde do PONTO (#15a05c),
   e a diferenca nao e estetica: o ponto e elemento de UI (piso 3:1, e o
   #15a05c da 3,38 no claro), o botao carrega TEXTO branco (piso 4,5:1, e o
   mesmo #15a05c daria 3,38 -- reprova). Reusar a cor do ponto aqui foi o erro
   que o teste de contraste pegou; #0f7a46 da 5,39:1. */
.sf-btn-ok  { background: #0f7a46; border-color: #0f7a46; color: #fff; }
.sf-btn-ok:hover { background: #0d6b3d; border-color: #0d6b3d; }
/* ⚠️ Recusar/Desligar em vermelho de BORDA, nunca preenchido: preenchido, ele
   competiria com "Atender" -- e o erro de clicar no vermelho custa a ligacao. */
.sf-btn-nao { color: var(--danger); border-color: var(--danger); }

.sf-ficha { font-size: .85rem; margin-top: .2rem; }

/* ⚠️ "Encerrar posto" TIRA O RAMAL DO AR. Fica fora do painel e discreto: e o
   oposto do que se quer clicar por engano ao procurar "pausa". */
.sf-sair {
    justify-self: center; background: none; border: 0; padding: .2rem;
    color: var(--muted); font: inherit; font-size: .78rem; cursor: pointer;
    text-decoration: underline; text-underline-offset: 2px;
}
.sf-sair:hover { color: var(--danger); }

/* --- rodape: quem sou e se estou conectado --- */
.sf-rodape {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .4rem; font-size: .78rem; color: var(--muted);
}
/* ⚠️ `min-width: 0` + ellipsis: "Laercio - Teste Tele atendente" nao cabe ao
   lado do indicador numa janela de 420px, e sem isso ele empurra a conexao
   para fora da tela -- justamente o dado que precisa estar sempre visivel. */
.sf-eu { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ⚠️ "Sair da conta" e o "Encerrar posto" sao acoes DIFERENTES e a tela precisa
   mostrar isso: encerrar o posto tira o ramal do ar e mantem a sessao (da para
   reassumir em um clique), sair encerra a sessao inteira. Por isso este fica
   discreto, do tamanho do rodape, e nao com a forma de botao -- o destrutivo
   nao pode competir visualmente com o que se usa no dia a dia. */
.sf-sair-form { margin-left: auto; }
.sf-sair-conta {
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; color: var(--muted);
    text-decoration: underline; text-underline-offset: 2px;
}
.sf-sair-conta:hover { color: var(--danger); }
.sf-conexao { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.sf-conexao-ponto { width: 7px; height: 7px; border-radius: 50%; background: #8a7a79; }
.sf-conexao[data-estado="on"]  .sf-conexao-ponto { background: #15a05c; }
.sf-conexao[data-estado="off"] .sf-conexao-ponto { background: #e0564f; }

.sf-aviso {
    font-size: .78rem; color: var(--muted);
    border-left: 3px solid var(--primary); padding: .35rem .6rem; margin: 0;
}

/* ⚠️ So aparece quando a pausa NAO chega a fila: o atendente nao recebe chamada
   de qualquer forma (a recusa local vale), mas o discador passa a conta-lo como
   livre -- e ai alguem precisa saber. */
.sf-alerta-fila {
    margin: 0; padding: .45rem .6rem; border-radius: 8px; font-size: .78rem;
    color: var(--alert-warn-ink);
    background: color-mix(in srgb, var(--alert-warn-ink) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--alert-warn-ink) 30%, transparent);
}

/* --- detalhes tecnicos (fechado) --- */
.sf-detalhes { font-size: .78rem; }
.sf-detalhes > summary {
    cursor: pointer; color: var(--muted); padding: .25rem 0;
    list-style: revert;   /* a setinha nativa volta: e a dica de que abre */
}
.sf-detalhes > summary:hover { color: var(--text); }
.sf-tec { margin: .3rem 0; font-variant-numeric: tabular-nums; word-break: break-all; }

.sf-log {
    list-style: none; margin: .35rem 0 0; padding: 0; display: grid; gap: .15rem;
    font-size: .74rem; max-height: 14rem; overflow-y: auto;
}
.sf-log-linha { padding: .2rem .4rem; border-radius: 6px; background: var(--card); border: 1px solid var(--card-border); }
.sf-log-hora { color: var(--muted); font-variant-numeric: tabular-nums; }
.sf-log-srv { border-left: 3px solid var(--primary); }
.sf-log-aviso { color: var(--alert-warn-ink); }
.sf-log-erro { color: var(--alert-error-ink); }

.voip-teste { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .35rem; }
.voip-teste-item { padding: .45rem .7rem; border-radius: var(--radius); border: 1px solid var(--card-border); background: var(--card); }
.voip-teste-item.is-ok { border-color: color-mix(in srgb, var(--success) 45%, var(--card-border)); }
.voip-teste-item.is-erro { border-color: color-mix(in srgb, var(--danger) 45%, var(--card-border)); }
/* Mapeamento: pares DDD + número (Operadoras → Envios → Mapear). */
.map-pares { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--card-border); display: grid; gap: .6rem; }
.map-pares-tit { font-size: .92rem; margin: 0; display: flex; align-items: center; gap: .5rem; }
.map-par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 11rem) auto; gap: .6rem; align-items: end; }
.map-par .ff { min-width: 0; }
.map-par .ff > label { display: block; font-size: .78rem; color: var(--muted); margin-bottom: .2rem; }
.map-par select { width: 100%; }
.map-par-x { padding-inline: .7rem; }
.map-pares [data-par-add] { justify-self: start; }
.map-par.map-par-1 { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 640px) { .map-par { grid-template-columns: 1fr 1fr; } }
/* Selo de status ao lado do título da ficha do envio (atualizado sozinho pelo carga-progresso.js). */
.pill.pill-titulo { font-size: .72rem; vertical-align: middle; margin-left: .4rem; }

.check {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: .4rem 0 1rem;
    font-size: .9rem;
    color: var(--text);
    cursor: pointer;
}
.check input { width: 18px; height: 18px; accent-color: var(--primary); }

/* Modal */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.modal.is-open { display: flex; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(16, 24, 40, .45); }
.modal-box {
    position: relative;
    width: 100%;
    max-width: 460px;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    max-height: 90vh;
    overflow-y: auto;
    animation: modal-in .16s ease-out;
}
@keyframes modal-in {
    from { opacity: 0; transform: translateY(8px) scale(.99); }
    to   { opacity: 1; transform: none; }
}
/* Modal com autocomplete: o overflow padrão cortaria a lista de sugestões. */
.modal-box.modal-ac { overflow: visible; }
.modal-box.modal-lg { max-width: 660px; }
.modal-box.modal-xl { max-width: 900px; }
/* ⚠️ Largura PRÓPRIA da Régua, e não um `.modal-xl` mais largo: aquela classe
   é usada por dez outras telas (Financeiro, Negativação, NOC, ADM) e alargá-la
   mexeria em todas. Aqui a linha do tempo precisa de espaço horizontal — é o
   conteúdo mais largo do sistema. `96vw` impede que ela estoure a tela. */
.modal-box.modal-regua { max-width: min(1500px, 96vw); }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
.modal-head h2 { margin: 0; font-size: 1.2rem; }
/*
 * ⚠️ `text-decoration: none` porque o ✕ nem sempre é <button>. Quando o estado
 * do modal mora na URL (`?downloads=`, `?edit=`), fechar tem de ser um LINK que
 * tira o parâmetro — esconder o elemento pelo JS deixaria o modal voltar no F5.
 * Como <a>, sem esta regra ele sai sublinhado.
 */
.modal-x { background: none; border: none; font-size: 1.6rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 .25rem; text-decoration: none; }
.modal-x:hover { color: var(--text); }
.modal-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.25rem; }
.modal-divider { height: 1px; background: var(--card-border); margin: 1.25rem 0 1rem; }

/* Boletos — badges de status, spinner e erro do formulário */
.bo-badge { display: inline-block; padding: .18rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.bo-enviado { background: rgba(22, 163, 74, .12); color: #15803d; }
.bo-falha { background: rgba(220, 38, 38, .12); color: #b91c1c; }
.bo-form-error { margin: .2rem 0 0; color: #b91c1c; font-size: .88rem; }
.bo-icon-btn { padding: .3rem .45rem; display: inline-flex; align-items: center; justify-content: center; gap: .2rem; line-height: 1; vertical-align: middle; }
.bo-icon-btn svg { display: block; flex: 0 0 auto; }
.bo-pdf-count { font-size: .78rem; font-weight: 600; line-height: 1; }
/* Ícone de PDF em vermelho */
.bo-pdf-btn { color: #d32f2f; }
.bo-pdf-btn:hover { color: #b71c1c; background: rgba(211, 47, 47, .1); }
/* Log de envio (timeline) */
.bo-log { list-style: none; margin: .3rem 0 0; padding: 0; }
.bo-log-item { position: relative; display: flex; gap: .7rem; padding: 0 0 .9rem 0; }
.bo-log-item:not(:last-child) .bo-log-dot::after {
    content: ""; position: absolute; left: 5px; top: 14px; bottom: -2px; width: 2px; background: var(--card-border);
}
.bo-log-dot { position: relative; flex: 0 0 auto; width: 12px; height: 12px; margin-top: 3px; border-radius: 50%; background: #b9a9a9; }
.bo-ev-ok .bo-log-dot { background: #15803d; }
.bo-ev-info .bo-log-dot { background: #2563eb; }
.bo-ev-open .bo-log-dot { background: #f59e0b; }
.bo-ev-fail .bo-log-dot { background: #b91c1c; }
.bo-log-main { display: flex; flex-direction: column; gap: .1rem; }
.bo-log-label { font-weight: 600; font-size: .92rem; color: #2b1f1f; }
.bo-log-time { color: var(--muted); font-size: .8rem; }
.bo-log-det { color: #6a5a5a; font-size: .82rem; word-break: break-word; }
.bo-ev-fail .bo-log-label { color: #b91c1c; }
.bo-msgid { background: rgba(16, 24, 40, .08); padding: .05rem .35rem; border-radius: 5px; font-size: .8rem; word-break: break-all; }
.bo-copy { margin-left: .4rem; border: 1px solid var(--card-border); background: var(--card); color: var(--primary); font-size: .74rem; padding: .05rem .4rem; border-radius: 999px; cursor: pointer; }
.bo-copy:hover { background: var(--primary-soft); }
/* Lista de PDFs do boleto (modal) */
.bo-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.bo-file-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border: 1px solid var(--card-border); border-radius: 10px; }
.bo-file-ic { flex: 0 0 auto; }
.bo-file-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.bo-file-item .btn-ghost { flex: 0 0 auto; }
.bo-smtp { margin-top: .6rem; border-top: 1px solid var(--card-border); padding-top: .6rem; }
.bo-smtp summary { cursor: pointer; font-weight: 600; font-size: .88rem; color: var(--primary); }
.bo-smtp-pre {
    margin: .5rem 0 0; padding: .7rem .85rem; background: #1f1a1a; color: #e8dede;
    border-radius: 8px; font-size: .78rem; line-height: 1.5; max-height: 320px;
    overflow: auto; white-space: pre-wrap; word-break: break-word;
}
.bo-eye { display: inline-flex; align-items: center; justify-content: center; color: #b9a9a9; vertical-align: middle; }
.bo-eye.is-open { color: #15803d; }
.visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.bo-spinner {
    width: 40px; height: 40px; margin: .4rem auto 0;
    border: 4px solid var(--card-border); border-top-color: var(--primary);
    border-radius: 50%; animation: bo-spin .8s linear infinite;
}
@keyframes bo-spin { to { transform: rotate(360deg); } }
/* PDFs do boleto: a área de arrastar e a fila reusam o visual das Gravações
   (`.grv-drop`, `.grv-fila-sem-data`) — é o mesmo componente na tela. Aqui
   só o que é do boleto: com até 36 arquivos a fila ROLA dentro do modal, em
   vez de empurrar o botão de enviar para fora da tela. */
.bo-anexos .grv-drop { margin-top: .1rem; }
.bo-anexos input.visually-hidden { width: 1px; height: 1px; padding: 0; border: 0; }
.bo-anexos input.visually-hidden:focus-visible + .grv-drop { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.bo-fila .bo-fila-itens { max-height: 236px; overflow-y: auto; overscroll-behavior: contain; }
.bo-fila-resumo { margin: .5rem 0 0; font-size: .84rem; color: var(--text); font-variant-numeric: tabular-nums; }
.bo-fila-resumo.is-erro { color: var(--alert-error-ink); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .bo-spinner { animation-duration: 2s; } }
.reset-form { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; }

/* Painel lateral (off-canvas) — desliza da direita para a esquerda */
.side-panel {
    position: fixed;
    inset: 0;
    z-index: 200;
    visibility: hidden;
    transition: visibility 0s linear .28s;
}
.side-panel.is-open { visibility: visible; transition-delay: 0s; }
.side-panel-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 24, 40, .45);
    opacity: 0;
    transition: opacity .28s ease;
}
.side-panel.is-open .side-panel-backdrop { opacity: 1; }
.side-panel-box {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 480px;
    background: var(--card);
    box-shadow: -8px 0 30px rgba(16, 24, 40, .18);
    transform: translateX(100%);
    transition: transform .28s ease;
    overflow-y: auto;
    padding: 1.5rem;
}
.side-panel.is-open .side-panel-box { transform: translateX(0); }
.side-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
.side-panel-head h2 { margin: 0; font-size: 1.2rem; }
.side-panel-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.25rem; }
@media (max-width: 560px) { .side-panel-box { max-width: 100%; } }

/* Equipes — edição de membros */
.row-inline { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; }
.member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .1rem .75rem;
    margin: .25rem 0 .5rem;
}
.member-grid .check { margin: .3rem 0; }
/*
 * ⚠️ O NOME DE UMA PESSOA É CONTEÚDO, não rótulo de campo. A grade quase sempre
 * fica dentro de um `.field`, e ali o `.field label` (0,82rem, peso 600,
 * `var(--muted)`) alcançava cada `<label class="check">`: os nomes saíam com a
 * mesma cara do rótulo "Usuários" logo acima, e medidos em **4,47:1** sobre o
 * cartão no modo claro — abaixo dos 4,5:1 de AA para texto normal (13px em peso
 * 600 não é "texto grande"). Também perdiam o `display: flex`, e com ele o
 * alinhamento entre a caixa e o nome.
 *
 * O `.field` na frente é obrigatório: `.check` sozinho (0,1,0) perde para
 * `.field label` (0,1,1).
 */
.member-grid .check,
.field .member-grid .check {
    display: flex;
    align-items: center;
    font-size: .9rem;
    font-weight: 400;
    color: var(--text);
    margin: .3rem 0;
}

/* Matriz de permissões e utilidades */
.ta-center { text-align: center; }
/* Matriz de permissões (perfis) */
.matrix-card { padding: 0; max-width: 880px; overflow: hidden; }
.matrix { table-layout: fixed; }
.matrix th, .matrix td { white-space: nowrap; }

.matrix .matrix-col-module { width: 36%; text-align: left; }
.matrix .matrix-col-action { width: 12.8%; text-align: center; }

.matrix thead .matrix-col-action { vertical-align: middle; }
.matrix-col-label { display: block; }
.matrix thead .perm-all { display: inline-block; margin-top: .45rem; }

.matrix tbody td.matrix-col-module { font-weight: 600; color: var(--text); }
.matrix tbody tr[data-module] td { padding-top: .72rem; padding-bottom: .72rem; }

/* Cabeçalho de cada seção (grupo do menu) */
.matrix-group td {
    background: var(--surface);
    color: var(--muted);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .5rem 1rem !important;
    border-bottom: 1px solid var(--card-border);
}
.matrix-group:hover td { background: var(--surface); }

/* Checkboxes da matriz */
.matrix .perm {
    width: 18px; height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
    vertical-align: middle;
}
.matrix .perm:disabled { cursor: not-allowed; opacity: .4; }
.matrix .perm-all { display: inline-block; }
.perm-na { color: var(--card-border); user-select: none; }
.btn-danger { color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); border-color: rgba(192, 54, 47, .3); color: var(--danger); }

/* ==============================================================
   Chat da Aninha
   ============================================================== */
.chat {
    display: flex;
    flex-direction: column;
    max-width: 760px;
    margin: 0 auto;
    height: calc(100dvh - 150px);
}
.chat-scroll { flex: 1 1 auto; overflow-y: auto; padding: .5rem .25rem; }

.chat-hero { text-align: center; padding: 3.5rem 1rem 2rem; }
.chat-hero.hidden { display: none; }
.chat-hero-mark { font-size: 2.1rem; color: var(--primary); line-height: 1; }
.chat-hero h1 { margin: .8rem 0 .4rem; font-size: 1.8rem; letter-spacing: -.02em; }
.chat-hero p { margin: 0; color: var(--muted); }

.chat-messages { display: flex; flex-direction: column; }
.msg { display: flex; gap: .7rem; margin: .55rem 0; }
.msg-user { justify-content: flex-end; }
.msg-avatar {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    border-radius: 8px;
    display: grid; place-items: center;
    color: #fff; font-size: .8rem;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
}
.msg-body { 
        line-height: 1.6;
    font-size: .96rem;
    max-width: 90%;
    word-wrap: break-word;
    background: #e4e4e4;
    padding: 0 30px;
 }
.msg-user .msg-body {
    background: var(--primary-soft);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: .6rem .9rem;
}
.msg-assistant .msg-body { padding-top: .15rem; }
.msg-error .msg-body { color: var(--danger); }
/* Markdown formatado nas respostas da Aninha */
/* ⚠️ Cores por TOKEN, não hex: `#2b1f1f` fixo fazia negrito, títulos e cabeçalho
   de tabela SUMIREM no modo escuro (escuro sobre escuro) — nas duas Aninhas. */
.msg-body strong { font-weight: 700; color: var(--text); }
.msg-body em { font-style: italic; }
.msg-body del { opacity: .6; }
.msg-body a { color: var(--primary); text-decoration: underline; }
.msg-body p { margin: 0 0 .6rem; }
.msg-body > *:last-child { margin-bottom: 0; }
/* Títulos */
.msg-body .md-h { font-weight: 700; color: var(--text); line-height: 1.3; margin: .9rem 0 .45rem; }
.msg-body .md-h:first-child { margin-top: 0; }
.msg-body .md-h1 { font-size: 1.18rem; }
.msg-body .md-h2 { font-size: 1.06rem; padding-bottom: .28rem; border-bottom: 1px solid var(--card-border); }
.msg-body .md-h3 { font-size: .98rem; color: var(--primary); }
/* Listas (com aninhamento) */
.msg-body ul, .msg-body ol { margin: .4rem 0; padding-left: 1.35rem; }
.msg-body li { margin: .2rem 0; }
.msg-body li > ul, .msg-body li > ol { margin: .2rem 0; }
.msg-body ul { list-style: disc; }
.msg-body ul ul { list-style: circle; }
/* Divisória */
.msg-body hr { border: none; border-top: 1px solid var(--card-border); margin: .9rem 0; }
/* Citação */
.msg-body .md-quote {
    margin: .6rem 0; padding: .5rem .85rem; color: var(--muted);
    background: var(--primary-soft); border-left: 3px solid var(--primary); border-radius: 0 8px 8px 0;
}
/* Código */
.msg-body code { background: rgba(16, 24, 40, .08); padding: .05rem .3rem; border-radius: 5px; font-size: .9em; }
.msg-body .md-pre { background: var(--surface); border: 1px solid var(--card-border); padding: .7rem .85rem; border-radius: 10px; overflow-x: auto; margin: .6rem 0; }
.msg-body .md-pre code { background: none; padding: 0; white-space: pre; }
/* Tabela */
.msg-body .md-table-wrap { overflow-x: auto; margin: .6rem 0; }
.msg-body .md-table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.msg-body .md-table th, .msg-body .md-table td { border: 1px solid var(--card-border); padding: .4rem .6rem; text-align: left; vertical-align: top; }
.msg-body .md-table th { background: var(--primary-soft); font-weight: 700; color: var(--text); }
.msg-body .md-table tbody tr:nth-child(even) td { background: rgba(16, 24, 40, .025); }

/* Auditoria de conversas */
.aud-conv-meta { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; }
.aud-conv-meta > div { display: flex; flex-direction: column; gap: .1rem; }
.aud-conv-meta span { color: var(--muted); font-size: .78rem; }
.aud-conv-meta strong { font-size: .95rem; }
.aud-msg-time { color: var(--muted); font-size: .72rem; margin-top: .2rem; }
.msg-user .aud-msg-time { text-align: right; }

/* Auditoria do chat interno (mensagens) */
.aud-chat { display: flex; flex-direction: column; gap: .85rem; }
.aud-chat-msg { display: flex; gap: .6rem; }
.aud-chat-avatar {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center; color: #fff; font-size: .82rem; font-weight: 600;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
}
.aud-chat-body { flex: 1 1 auto; min-width: 0; }
.aud-chat-head { display: flex; align-items: baseline; gap: .5rem; }
.aud-chat-head strong { font-size: .9rem; }
.aud-chat-time { color: var(--muted); font-size: .74rem; }
.aud-chat-text { font-size: .93rem; line-height: 1.5; margin-top: .1rem; word-wrap: break-word; }

/* ---------- Auditoria → Conversas: busca ----------
 * O realce tem fundo E tinta próprios (os dois fixos): sobre o texto claro do
 * modo escuro, só o fundo amarelo deixaria a palavra achada ilegível. */
.aud-busca { margin-bottom: .9rem; }
.aud-busca > label { display: block; font-size: .82rem; font-weight: 600; color: var(--muted); margin-bottom: .35rem; }
.aud-busca .aud-busca-campo { margin-top: 0; margin-bottom: .4rem; }
.aud-busca .aud-busca-campo input { font-size: 1rem; padding: .7rem .85rem; }
.aud-busca-resumo { margin: 1rem 0 0; font-size: .9rem; color: var(--text); }
.aud-busca-onde { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.aud-busca-trecho {
    margin-top: .4rem; max-width: 62ch; font-size: .84rem; line-height: 1.5; color: var(--text);
    padding-left: .6rem; border-left: 3px solid var(--card-border); overflow-wrap: break-word;
}
.aud-busca-quem { color: var(--muted); white-space: nowrap; }
.aud-busca-trecho mark, .aud-chat-text mark, .aud-att-file mark {
    background: #fde68a; color: #3b2a00; border-radius: 3px; padding: 0 .1em;
}
.aud-busca-barra {
    display: flex; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; margin-top: 1rem;
    padding: .65rem .9rem; font-size: .9rem; color: var(--text);
    background: var(--surface); border: 1px solid var(--card-border); border-radius: 12px;
}
.aud-busca-nav { display: inline-flex; align-items: center; gap: .4rem; }
.aud-busca-pos { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .85rem; min-width: 4.5em; text-align: right; }
.aud-busca-limpar { margin-left: auto; font-size: .85rem; color: var(--primary); font-weight: 600; }
/* Mensagem que cita a busca: faixa à esquerda. A atual (↑ ↓) ganha o fundo. */
.aud-chat-msg { scroll-margin-top: 6rem; }
.aud-chat-msg.is-hit { box-shadow: inset 3px 0 0 #f59e0b; padding-left: .55rem; border-radius: 4px; }
.aud-chat-msg.is-atual { background: var(--surface); }
/* Histórico de edição (auditoria): fechado por padrão para não poluir a
   leitura da conversa — quem está auditando abre a mensagem que interessa. */
.aud-versoes { margin-top: .35rem; font-size: .82rem; }
.aud-versoes > summary { cursor: pointer; color: var(--muted); }
.aud-versoes > summary:hover { color: var(--primary); }
.aud-versao { margin-top: .4rem; padding: .4rem .6rem; border-left: 3px solid var(--card-border); background: var(--surface); border-radius: 8px; }
.aud-versao-head { font-size: .74rem; color: var(--muted); margin-bottom: .15rem; }
.aud-att-img img { max-width: 260px; max-height: 260px; border-radius: 10px; display: block; margin-top: .4rem; }
.aud-att-file {
    display: inline-flex; align-items: center; gap: .45rem; margin-top: .4rem;
    text-decoration: none; color: var(--text);
    background: var(--surface); border: 1px solid var(--card-border); border-radius: 10px; padding: .45rem .7rem;
    font-size: .88rem;
}
.aud-att-file:hover { border-color: var(--primary); }
.aud-att-ic { font-size: 1.05rem; }

/* Importação de dados */
.imp-issues { display: flex; flex-direction: column; gap: .4rem; max-height: 320px; overflow-y: auto; }
.imp-issue {
    display: flex; align-items: flex-start; gap: .5rem;
    font-size: .86rem; padding: .35rem .5rem; border-radius: 8px; background: var(--surface);
}
.imp-issue-tag {
    flex: 0 0 auto; font-size: .7rem; font-weight: 700; text-transform: uppercase;
    padding: .1rem .45rem; border-radius: 999px; color: #fff;
}
.imp-aviso .imp-issue-tag { background: #d08700; }
.imp-erro .imp-issue-tag { background: var(--danger); }
.imp-erro { background: var(--danger-soft); }
.imp-contact { font-size: .85rem; line-height: 1.5; }
.imp-headers { margin: .25rem 0 .75rem; padding-left: 1.4rem; columns: 2; font-size: .9rem; }
.imp-headers li { margin: .15rem 0; break-inside: avoid; }
@media (max-width: 640px) { .imp-headers { columns: 1; } }
.imp-debug {
    background: #1e1e1e; color: #e6e6e6;
    padding: .75rem .9rem; border-radius: 8px;
    font-size: .74rem; line-height: 1.45;
    max-height: 360px; overflow: auto; white-space: pre-wrap; word-break: break-word;
}

.typing { display: inline-flex; gap: 4px; padding: .3rem 0; }
.typing i {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--muted);
    animation: typing 1s infinite ease-in-out;
}
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing {
    0%, 60%, 100% { opacity: .25; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

.chat-composer { flex: 0 0 auto; padding-top: .75rem; }
.chat-notice {
    background: rgba(153, 54, 53, .08);
    border: 1px solid rgba(153, 54, 53, .2);
    color: var(--primary-hover);
    padding: .7rem .9rem;
    border-radius: 11px;
    font-size: .88rem;
    margin-bottom: .6rem;
}
.chat-notice a { color: var(--primary); }

.chat-box {
    background: var(--card);
    border: 1.5px solid var(--card-border);
    border-radius: 16px;
    padding: .65rem .85rem .55rem;
    box-shadow: var(--shadow-sm);
    transition: border-color .15s, box-shadow .15s;
}
.chat-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }
.chat-box textarea {
    width: 100%;
    border: none;
    outline: none;
    resize: none;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 1rem;
    line-height: 1.5;
    max-height: 200px;
    overflow-y: auto;
}
.chat-box textarea::placeholder { color: #a9938f; }
.chat-box-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: .35rem;
}
.chat-box-tools { display: flex; align-items: center; gap: .5rem; }
.chat-model { font-size: .8rem; color: var(--muted); }
.chat-send {
    width: 34px; height: 34px;
    border: none; border-radius: 9px;
    background: var(--primary);
    color: #fff;
    display: grid; place-items: center;
    cursor: pointer;
    transition: background .15s, opacity .15s;
}
.chat-send:hover { background: var(--primary-hover); }
.chat-send:disabled { opacity: .4; cursor: not-allowed; }

/* Botão de anexo (clipe) */
.chat-attach {
    width: 32px; height: 32px;
    border: 1px solid var(--card-border);
    border-radius: 9px;
    background: var(--surface);
    color: var(--muted);
    display: grid; place-items: center;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.chat-attach:hover { background: var(--card); color: var(--primary); border-color: var(--primary); }
.chat-attach:disabled { opacity: .4; cursor: not-allowed; }

/* Chip do anexo pendente */
.chat-attach-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    max-width: 100%;
    margin-bottom: .5rem;
    padding: .35rem .5rem .35rem .6rem;
    background: var(--primary-soft);
    border: 1px solid var(--card-border);
    border-radius: 999px;
    font-size: .82rem;
    width: max-content;
}
.chat-attach-chip .chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.chat-attach-chip .chip-x {
    border: none; background: none; color: var(--muted);
    cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 .15rem;
}
.chat-attach-chip .chip-x:hover { color: var(--danger); }

/* Modal de anexo (área de escolha) */
.attach-drop {
    display: block;
    text-align: center;
    border: 2px dashed var(--card-border);
    border-radius: 12px;
    padding: 1.75rem 1rem;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.attach-drop:hover { border-color: var(--primary); background: var(--surface); }
.attach-ic { font-size: 1.8rem; }
.attach-cta { margin: .5rem 0 .25rem; font-weight: 600; }
.attach-picked {
    margin-top: .75rem;
    font-size: .85rem;
    color: var(--primary);
    font-weight: 600;
    word-break: break-all;
}

/* Layout com histórico (sidebar direita) */
.aninha-layout {
    display: flex;
    gap: 1.25rem;
    height: calc(100dvh - 150px);
}
.aninha-layout .chat {
    flex: 1 1 auto;
    height: 100%;
    max-width: none;
    margin: 0;
    min-width: 0;
}
.chat-history {
    flex: 0 0 258px;
    width: 258px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.chat-new {
    width: 100%;
    margin-bottom: .75rem;
    padding: .6rem .8rem;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: var(--card);
    color: var(--text);
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    transition: background .15s, border-color .15s;
}
.chat-new:hover { background: var(--surface); border-color: var(--primary); }
.chat-new span { color: var(--primary); font-weight: 800; font-size: 1.05rem; }
.chat-history-list { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: .2rem; }
.chat-history-empty { color: var(--muted); font-size: .85rem; padding: .5rem .25rem; }
.chat-history-item {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .55rem;
    border-radius: 9px;
    color: var(--muted);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.chat-history-item:hover { background: var(--surface); color: var(--text); }
.chat-history-item.active { background: var(--primary-soft); color: var(--primary); }
.chat-history-title { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.chat-history-del {
    flex: 0 0 auto;
    border: none;
    background: none;
    color: inherit;
    opacity: 0;
    cursor: pointer;
    font-size: 1.15rem;
    line-height: 1;
    padding: 0 .2rem;
    border-radius: 6px;
}
.chat-history-item:hover .chat-history-del { opacity: .5; }
.chat-history-del:hover { opacity: 1 !important; color: var(--danger); }

/* ==============================================================
   Aninha Adv Virtual (Jurídico) — reusa o chat da Aninha.
   `.jur-layout` põe a lista de conversas à ESQUERDA (o aside vem primeiro
   no HTML) e acrescenta persona, fontes e modo somente leitura.
   ============================================================== */
.jur-escopo { display: flex; gap: .3rem; margin-bottom: .6rem; }
.jur-escopo button {
    flex: 1 1 0;
    padding: .35rem .5rem;
    border: 1px solid var(--control-border);
    border-radius: 8px;
    background: var(--card);
    color: var(--text);
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
}
.jur-escopo button.is-ativo { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); font-weight: 600; }
.jur-hist-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.chat-history-sub { font-size: .74rem; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jur-persona { display: inline-flex; align-items: center; }
.jur-persona select {
    max-width: 220px;
    padding: .25rem .5rem;
    border: 1px solid var(--control-border);
    border-radius: 8px;
    background: var(--card);
    color: var(--text);
    font: inherit;
    font-size: .82rem;
}
.jur-aviso { margin: .35rem 0 0; text-align: center; font-size: .74rem; }
.jur-fontes { margin-top: .7rem; padding-top: .55rem; border-top: 1px dashed var(--card-border); font-size: .82rem; }
.jur-fontes-tit { color: var(--muted); font-weight: 600; margin-bottom: .3rem; }
.jur-fontes-obs { color: var(--muted); margin-top: .25rem; }
.jur-fonte {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    max-width: 100%;
    margin: .15rem .3rem .15rem 0;
    padding: .15rem .55rem;
    border: 1px solid var(--control-border);
    border-radius: 999px;
    background: var(--card);
    color: var(--text);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
a.jur-fonte:hover { border-color: var(--primary); }
.jur-fonte b { color: var(--primary); }
.msg-body .jur-cit { font-size: .72em; font-weight: 700; color: var(--primary); padding: 0 .1rem; }
.jur-anexos { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .2rem 0 .6rem; font-size: .8rem; }
.jur-anexos-tit { color: var(--muted); }
.jur-anexo { padding: .12rem .5rem; border: 1px solid var(--card-border); border-radius: 999px; background: var(--surface); color: var(--text); }
.jur-url { display: inline-block; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.jur-resumo { margin: .25rem 0 .75rem; }
/*
 * Altura do chat do jurídico. ⚠️ O `calc(100dvh - 150px)` herdado da Aninha não
 * desconta o topo inteiro (topstrip + menu + margem da página ≈ 180px) nem a
 * linha de aviso abaixo da caixa de mensagem — em tela cheia a caixa ficava
 * cortada no rodapé. Só a partir de 821px: abaixo disso o layout empilha e a
 * regra do celular (`height: auto`) tem de continuar valendo.
 */
@media (min-width: 821px) {
    .aninha-layout.jur-layout { height: calc(100dvh - 225px); }
}
/*
 * ⚠️ Coluna de ações SEM `.ta-right`: aquela classe tem `white-space: nowrap`
 * (feita para valores em R$), e com quatro botões a coluna não quebrava — ficava
 * com ~470px, espremia o título a uma palavra por linha e estourava a página.
 * Aqui os botões quebram de linha e continuam alinhados à direita.
 */
.table .jur-acoes { text-align: right; min-width: 9rem; }
/* Flex num DIV dentro da célula, não no `td`: `display:flex` na célula tira
   ela do layout de tabela. Formulário `inline` empilhado sobrepunha os botões. */
.jur-botoes { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .3rem; }
/* Sistema → Aninha → WhatsApp: passos do webhook e a URL copiável. */
.an-passos { margin: .25rem 0 .75rem; padding-left: 1.25rem; line-height: 1.7; }
.an-url { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .35rem 0; }
/* Telefone não quebra entre DDD e número: "+55 (21) 97777-" / "6666" não se lê. */
.table .an-num { white-space: nowrap; }
/* A ação destrutiva fica à esquerda, longe do Salvar. */
.modal-actions .an-excluir { margin-right: auto; }
.an-url code { padding: .25rem .5rem; border: 1px solid var(--card-border); border-radius: 6px; background: var(--surface); color: var(--text); overflow-wrap: anywhere; }

@media (max-width: 820px) {
    .aninha-layout { flex-direction: column; height: auto; }
    .aninha-layout .chat { height: calc(100dvh - 280px); }
    .chat-history {
        order: 2;
        flex: 0 0 auto;
        width: 100%;
        border-top: 1px solid var(--card-border);
        padding-top: .8rem;
    }
    .chat-history-list { max-height: 150px; }
}

/* ==============================================================
   CRM Kanban
   ============================================================== */
.crm-toolbar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.crm-select {
    padding: .5rem .7rem;
    border: 1px solid var(--card-border);
    border-radius: 9px;
    background: var(--card);
    color: var(--text);
    font: inherit;
    font-size: .9rem;
    max-width: 220px;
}
/* Item de dropdown como botão (ex.: "Nova oportunidade" no menu Criar) */
.dropdown-item-btn {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
}

/* ============================================================
   Grid de FORMULÁRIO (modais e telas de cadastro)
   ============================================================

   ⚠️⚠️ **Não é o `.crm-filter-grid`, e a diferença é o motivo deste bloco
   existir.** Aquele é uma BARRA DE FILTROS: trilhas fixas
   `1.6fr 1fr 1fr auto`, pensadas para busca larga + dois selects + os botões
   na ponta. Reusá-lo num formulário produz dois defeitos:

     1. linha com 2 ou 3 campos deixa as trilhas restantes VAZIAS — o campo
        não ocupa a largura que sobra, e o formulário fica com buracos;
     2. a trilha `auto` cresce com o CONTEÚDO. Um campo com dica embaixo
        ("Em branco, usa o mês do vencimento.") estica aquela trilha e espreme
        as `fr` — foi assim que o campo "Valor" do título virou uma caixa de
        30px com o rótulo quebrado em duas linhas.

   Aqui cada campo declara quantas colunas ocupa, de 12. `min-width: 0` em
   todos: item de grid nasce `min-width: auto` e um `<select>` com opção longa
   alargaria a coluna inteira. `align-items: start` porque a dica fica ABAIXO
   do campo — com `end` (o do filtro) as caixas de uma linha com dicas
   desalinhariam. */
.form-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: .9rem 1rem; align-items: start; }
.form-grid > .ff { grid-column: span 12; min-width: 0; }
/* ⚠️ A escala tinha BURACOS (faltavam 1, 2, 7, 10 e 11), e a falha era
   silenciosa: `.ff-2` não casava regra nenhuma, caía no `span 12` da linha
   acima e o campo ocupava a largura inteira — foi assim que o painel de
   filtros do Controle de Negativações saiu com um campo por linha. Com a
   escala completa, a conta "cada linha soma 12" finalmente vale para
   qualquer combinação. */
.form-grid > .ff-1 { grid-column: span 1; }
.form-grid > .ff-2 { grid-column: span 2; }
.form-grid > .ff-3 { grid-column: span 3; }
.form-grid > .ff-4 { grid-column: span 4; }
.form-grid > .ff-5 { grid-column: span 5; }
.form-grid > .ff-6 { grid-column: span 6; }
.form-grid > .ff-7 { grid-column: span 7; }
.form-grid > .ff-8 { grid-column: span 8; }
.form-grid > .ff-9 { grid-column: span 9; }
.form-grid > .ff-10 { grid-column: span 10; }
.form-grid > .ff-11 { grid-column: span 11; }
/* ⚠️ `.ff-12` faltava: o grid ia de 1 a 11, então um campo de linha inteira
   (um textarea de observações, um upload) não tinha como declarar o span e
   caía na trilha padrão do `.ff`. No breakpoint todos já viram 12. */
.form-grid > .ff-12 { grid-column: span 12; }
/* ⚠️ O rótulo ganha altura mínima de UMA LINHA para que um rótulo que quebre
   em duas não empurre só o seu campo e desalinhe a linha inteira. */
.form-grid .ff > label { min-height: 1.1rem; }
/* Linhas consecutivas se espaçam sozinhas — sem utilitário repetido em cada
   `<div class="form-grid">`, que é onde alguém esquece um e a linha cola. */
.form-grid + .form-grid { margin-top: .9rem; }
/* A dica não pode encostar no campo de baixo nem esticar a linha à toa. */
.form-grid .ff > .hint,
.form-grid .ff > .field-note { display: block; margin-top: .3rem; font-size: .74rem; line-height: 1.35; }
/* ⚠️ Faixa intermediária: um `.ff-2` tem ~110px num monitor de 1280 e não cabe
   um campo de data com rótulo. Os spans miúdos dobram antes de tudo empilhar —
   sem isso o painel de filtros só ficava legível em tela cheia. */
@media (max-width: 1200px) {
    .form-grid > .ff-1 { grid-column: span 2; }
    .form-grid > .ff-2 { grid-column: span 3; }
}
@media (max-width: 960px) {
    .form-grid > .ff-1, .form-grid > .ff-2 { grid-column: span 4; }
    .form-grid > .ff-3 { grid-column: span 6; }
}
@media (max-width: 760px) {
    /* No estreito tudo vira linha inteira: meia coluna de 360px não cabe um
       campo de data com rótulo. */
    .form-grid > .ff, .form-grid > .ff-1, .form-grid > .ff-2,
    .form-grid > .ff-3, .form-grid > .ff-4,
    .form-grid > .ff-5, .form-grid > .ff-6, .form-grid > .ff-7,
    .form-grid > .ff-8, .form-grid > .ff-9,
    .form-grid > .ff-10, .form-grid > .ff-11,
    .form-grid > .ff-12 { grid-column: span 12; }
}

/* Painel de filtros + indicadores do CRM */
.crm-panel { padding: 1.25rem; margin-bottom: 1rem; }
.crm-filter-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr auto; gap: .75rem; align-items: end; }
@media (max-width: 820px) { .crm-filter-grid { grid-template-columns: 1fr 1fr; } }
.ff label { display: block; font-size: .78rem; color: var(--muted); margin-bottom: .3rem; font-weight: 600; }
/* ⚠️ `select` e `textarea` NÃO estavam neste seletor, e a falta era silenciosa:
   o `.ff` promete "campo de formulário", mas só o `<input>` e o select COM a
   classe `.crm-select` recebiam largura — um `<select>` nu ficava com a largura
   do próprio texto, espremido no meio da coluna, enquanto o campo ao lado
   esticava. Foi o print do modal das Regras da Negativação que mostrou. */
.ff input, .ff select, .ff textarea, .ff .crm-select {
    width: 100%; max-width: none;
    padding: .55rem .7rem;
    border: 1px solid var(--card-border);
    border-radius: 9px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    outline: none;
}
.ff input:focus, .ff select:focus, .ff textarea:focus, .ff .crm-select:focus { border-color: var(--primary); background: var(--card); box-shadow: 0 0 0 3px var(--ring); }
.ff-actions { display: flex; align-items: flex-end; }
.crm-filter-search { display: flex; gap: .5rem; margin-top: .75rem; }
.crm-filter-search input {
    flex: 1 1 auto;
    padding: .55rem .7rem;
    border: 1px solid var(--card-border);
    border-radius: 9px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    outline: none;
}
.crm-filter-search input:focus { border-color: var(--primary); background: var(--card); box-shadow: 0 0 0 3px var(--ring); }
.crm-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: .75rem; margin-top: 1.25rem; }
@media (max-width: 900px) { .crm-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .crm-stats { grid-template-columns: repeat(2, 1fr); } }
.crm-stat {
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: .8rem .9rem;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.crm-stat-label { font-size: .78rem; color: var(--muted); }
.crm-stat-value { font-size: 1.55rem; font-weight: 700; line-height: 1.1; }
.crm-stat-money { font-size: 1.05rem; }

.kanban {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 1rem;
}
.kb-col {
    flex: 0 0 288px;
    width: 288px;
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 240px);
}
.kb-col-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem .85rem;
    border-bottom: 1px solid var(--card-border);
}
.kb-col-name { font-weight: 700; font-size: .9rem; flex: 1 1 auto; }
.kb-col-count {
    font-size: .72rem;
    color: var(--muted);
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 999px;
    padding: .05rem .5rem;
}
.kb-col-del { border: none; background: none; color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 .15rem; }
.kb-col-del:hover { color: var(--danger); }
.kb-cards {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: .6rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    min-height: 60px;
}
.kb-card {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: .65rem .75rem;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: border-color .15s;
}
.kb-card:hover { border-color: var(--primary); }
.kb-card.dragging { opacity: .45; }
.kb-card-title { font-weight: 600; font-size: .9rem; margin-bottom: .2rem; }
.kb-card-line { font-size: .8rem; color: var(--muted); line-height: 1.4; }
/* Empresa do cartão, logo abaixo do título: mais forte que o contato (a pergunta
   "de quem é este negócio?" vem antes de "com quem falo"), numa linha só — nome
   longo corta com reticências e aparece inteiro no `title`. O ícone de prédio é
   o que a separa do nome da PESSOA na linha de baixo. */
.kb-card-empresa {
    display: flex; align-items: center; gap: .3rem; min-width: 0;
    font-size: .8rem; font-weight: 600; color: var(--text); line-height: 1.4;
}
.kb-card-empresa svg { flex: 0 0 auto; color: var(--primary); }
.kb-card-empresa span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-card-value { margin-top: .35rem; font-size: .82rem; font-weight: 700; color: var(--success); }
.kb-add {
    margin: .5rem;
    padding: .5rem;
    border: 1px dashed var(--card-border);
    border-radius: 9px;
    background: none;
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    font-size: .85rem;
    transition: color .15s, border-color .15s;
}
.kb-add:hover { color: var(--primary); border-color: var(--primary); }
.kb-empty { color: var(--muted); padding: 2rem 1rem; }
.kb-col-head[style] .kb-col-del { color: inherit; opacity: .8; }
.kb-col-head[style] .kb-col-del:hover { opacity: 1; }

/* ---------- Configurações do CRM ---------- */
.crm-config {
    display: grid;
    grid-template-columns: 330px 1fr;
    gap: 1rem;
    align-items: start;
}
@media (max-width: 760px) { .crm-config { grid-template-columns: 1fr; } }
.cc-panel { padding: 1.25rem; }
.cc-title { margin: 0 0 1rem; font-size: 1.1rem; }
.cc-add { display: flex; gap: .5rem; margin-bottom: 1rem; align-items: center; }
.cc-add input[type="text"] {
    flex: 1 1 auto;
    padding: .6rem .75rem;
    border: 1px solid var(--card-border);
    border-radius: 9px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    outline: none;
}
.cc-add input[type="text"]:focus { border-color: var(--primary); background: var(--card); box-shadow: 0 0 0 3px var(--ring); }
.cc-color {
    width: 40px; height: 40px;
    padding: 2px;
    border: 1px solid var(--card-border);
    border-radius: 9px;
    background: var(--card);
    cursor: pointer;
}
.cc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.cc-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .55rem;
    border: 1px solid transparent;
    border-radius: 9px;
}
.cc-item:hover { background: var(--surface); }
.cc-item.active { background: var(--primary-soft); }
.cc-name { flex: 1 1 auto; cursor: pointer; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-item-actions { display: flex; gap: .1rem; opacity: 0; }
.cc-item:hover .cc-item-actions { opacity: 1; }
.cc-ic { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 1rem; padding: .12rem .35rem; border-radius: 6px; }
.cc-ic:hover { background: var(--card); color: var(--text); }
.cc-ic-del:hover { color: var(--danger); }
.cc-stage .cc-color { width: 28px; height: 28px; }
.cc-drag { cursor: grab; color: var(--muted); user-select: none; }
.cc-stage.dragging { opacity: .5; }
.cc-hint, .cc-empty, .cc-loading { color: var(--muted); font-size: .88rem; padding: .5rem .25rem; }

/* ---------- Abas de configuração do CRM ---------- */
.cc-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--card-border); margin-bottom: 1.25rem; }
.cc-tab {
    border: none;
    background: none;
    color: var(--muted);
    font: inherit;
    font-weight: 600;
    font-size: .95rem;
    padding: .65rem 1rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.cc-tab:hover { color: var(--text); }
.cc-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

/* ---------- Campos personalizados ---------- */
.crm-fields { display: grid; grid-template-columns: 300px 1fr; gap: 1rem; align-items: start; }
@media (max-width: 760px) { .crm-fields { grid-template-columns: 1fr; } }
.cf-entity-tabs { display: flex; flex-direction: column; gap: .3rem; }
.cf-entity {
    text-align: left;
    border: 1px solid var(--card-border);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .92rem;
    padding: .6rem .75rem;
    border-radius: 9px;
    cursor: pointer;
}
.cf-entity:hover { background: var(--card); }
.cf-entity.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.cf-form { border-bottom: 1px solid var(--card-border); padding-bottom: 1rem; margin-bottom: 1rem; }
.cf-form-grid { display: grid; grid-template-columns: 1fr 200px; gap: .75rem; }
@media (max-width: 560px) { .cf-form-grid { grid-template-columns: 1fr; } }
.cf-item { gap: .5rem; }
.cf-name { flex: 1 1 auto; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-badges { display: flex; gap: .35rem; flex: 0 0 auto; }
.cf-badge {
    font-size: .72rem;
    font-weight: 600;
    color: var(--muted);
    background: rgba(105, 117, 134, .14);
    padding: .12rem .5rem;
    border-radius: 999px;
    white-space: nowrap;
}
.cf-badge-req { color: var(--danger); background: var(--danger-soft); }
.cf-item.dragging { opacity: .5; }

/* Campos personalizados nos formulários das entidades */
.cf-fieldset { border-top: 1px dashed var(--card-border); margin-top: 1rem; padding-top: 1rem; }
.cf-fieldset-title { margin: 0 0 .75rem; font-size: .95rem; color: var(--muted); }
.cf-req-mark { color: var(--danger); }

/* ---------- Toasts globais (feedback de salvamento) ---------- */
/* Canto superior DIREITO: no centro o toast cobria o topo do formulário e
   competia com o conteúdo que a pessoa acabara de salvar. Em telas estreitas
   volta a ocupar a largura toda, senão fica espremido contra a borda. */
.nf-toasts {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: flex-end;
    pointer-events: none;
    width: max-content;
    max-width: calc(100vw - 2rem);
}
@media (max-width: 560px) {
    .nf-toasts { right: .6rem; left: .6rem; align-items: stretch; width: auto; }
}
.nf-toast {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem 1.1rem;
    border-radius: 10px;
    font-size: .92rem;
    font-weight: 600;
    color: #fff;
    background: #12a150;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .18);
    opacity: 0;
    /* Estado oculto = fora da tela, à direita. Serve para os dois momentos:
       entra deslizando para dentro e, ao ser dispensado, o JS só remove a
       classe `show` e ele volta deslizando para fora. Elemento em
       `position: fixed` não gera barra de rolagem ao passar da borda. */
    transform: translateX(110%);
    transition: opacity .28s ease, transform .28s cubic-bezier(.22, .61, .36, 1);
    pointer-events: auto;
}
.nf-toast.show { opacity: 1; transform: translateX(0); }
.nf-toast-saving { background: #4b5563; }
.nf-toast-success { background: #12a150; }
.nf-toast-error { background: var(--danger); }
.nf-toast-ic { display: inline-flex; font-size: 1rem; line-height: 1; }
.nf-spin { display: inline-block; animation: nf-spin 1.1s steps(8) infinite; }
@keyframes nf-spin { to { transform: rotate(360deg); } }

/* ---------- Detalhe da Oportunidade ---------- */
.op-stages { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.op-pill-form { margin: 0; }
.op-pill {
    padding: .5rem .9rem;
    border: 1px solid var(--card-border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.op-pill:hover { background: var(--card); color: var(--text); }
.op-pill.active { color: #fff; background: var(--primary); border-color: var(--primary); }

.op-grid { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 820px) { .op-grid { grid-template-columns: 1fr; } }
.op-panel-title { margin: 0 0 1rem; font-size: 1.05rem; }
.op-ro { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--card-border); }
.op-ro span { color: var(--muted); font-size: .88rem; }

/* Campos editáveis inline */
/* Select de funil/etapa no painel Dados: encosta à direita, como o valor dos
   demais campos, e nunca estoura a coluna (nome de etapa pode ser comprido). */
.op-sel {
    max-width: 62%;
    padding: .25rem .45rem;
    border: 1px solid var(--card-border);
    border-radius: 7px;
    background: var(--card);
    color: var(--primary);
    font-size: .9rem;
    font-weight: 500;
}
.op-mover-acao { align-items: center; }
.op-mover-acao .hint { font-size: .8rem; }
.op-frow { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--card-border); }
.op-flabel { color: var(--muted); font-size: .88rem; flex: 0 0 auto; }
.op-value { color: var(--primary); cursor: pointer; text-align: right; font-weight: 500; border-radius: 6px; padding: .1rem .3rem; }
.op-value:hover { background: var(--primary-soft); }
.op-empty { color: var(--muted); }
.op-frow.editing { flex-direction: column; align-items: stretch; }
.op-editor { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
.op-editor-input {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--card-border);
    border-radius: 9px;
    background: var(--card);
    color: var(--text);
    font: inherit;
    font-size: .95rem;
    outline: none;
}
.op-editor-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
textarea.op-editor-input { resize: vertical; min-height: 70px; }
.op-editor-actions { display: flex; gap: .5rem; }

.op-tabbar { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.op-tab {
    padding: .45rem .8rem;
    border: 1px solid var(--card-border);
    border-radius: 9px;
    background: var(--card);
    color: var(--muted);
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}
.op-tab.active { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.op-tab:disabled { opacity: .5; cursor: not-allowed; }

/* Tarefas da negociação */
.op-tasks-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9rem; }
.op-tasks { display: flex; flex-direction: column; gap: .55rem; }
.op-task {
    display: flex; align-items: flex-start; gap: .6rem;
    border: 1px solid var(--card-border); border-radius: 10px; padding: .6rem .75rem;
    background: var(--surface);
}
.op-task.done { opacity: .65; }
.op-task.done .op-task-subject { text-decoration: line-through; }
.op-task-toggle { margin: 0; flex: 0 0 auto; }
.op-task-check {
    border: none; background: none; cursor: pointer; font-size: 1.15rem; line-height: 1;
    color: var(--primary); padding: 0;
}
.op-task-body { flex: 1 1 auto; min-width: 0; }
.op-task-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.op-task-type { font-size: .76rem; color: var(--muted); font-weight: 600; flex: 0 0 auto; }
.op-task-subject { font-weight: 600; font-size: .95rem; }
.op-task-desc { font-size: .88rem; color: var(--text); margin-top: .2rem; line-height: 1.45; }
.op-task-meta { font-size: .78rem; color: var(--muted); margin-top: .25rem; }
.op-task-badge { color: var(--success); font-weight: 600; }
.op-task-del { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 1.2rem; line-height: 1; padding: 0 .1rem; }
.op-task-del:hover { color: var(--danger); }

.op-note-form { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: 1rem; }
.op-note-form textarea {
    flex: 1 1 auto;
    padding: .6rem .75rem;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .92rem;
    resize: vertical;
    min-height: 44px;
    outline: none;
}
.op-note-form textarea:focus { border-color: var(--primary); background: var(--card); box-shadow: 0 0 0 3px var(--ring); }
.op-notes { display: flex; flex-direction: column; gap: .6rem; }
.op-note { border-left: 3px solid var(--primary-soft); padding: .3rem 0 .3rem .75rem; }
.op-note-body { font-size: .92rem; line-height: 1.5; }
.op-note-meta { color: var(--muted); font-size: .78rem; margin-top: .2rem; }

/* Timeline do histórico da oportunidade */
.op-timeline { position: relative; display: flex; flex-direction: column; }
.op-timeline::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: var(--card-border);
}
.op-tl-item { position: relative; display: flex; gap: .75rem; padding: .35rem 0; }
.op-tl-dot {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--card-border);
    font-size: .8rem;
    line-height: 1;
}
.op-tl-note .op-tl-dot { background: var(--primary-soft); border-color: transparent; }
.op-tl-content { flex: 1 1 auto; min-width: 0; padding-top: .15rem; }
.op-tl-body { font-size: .9rem; line-height: 1.45; color: var(--text); }
.op-tl-body strong { font-weight: 600; }
.op-tl-note-body {
    font-size: .92rem;
    line-height: 1.5;
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: .5rem .7rem;
}
.op-tl-meta { color: var(--muted); font-size: .76rem; margin-top: .2rem; }

/* ---------- Comemoração "Ganho" (confete + parabéns) ---------- */
.crm-confetti {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3000;
}
.crm-congrats {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 3001;
    opacity: 0;
    transition: opacity .3s;
}
.crm-congrats.show { opacity: 1; }
.crm-congrats-box {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    box-shadow: 0 30px 70px -20px rgba(16, 24, 40, .45);
    padding: 1.6rem 2.4rem;
    text-align: center;
    transform: scale(.85);
    transition: transform .3s cubic-bezier(.2, .9, .3, 1.2);
}
.crm-congrats.show .crm-congrats-box { transform: scale(1); }
.crm-congrats-emoji { font-size: 2.8rem; line-height: 1; }
.crm-congrats-box h3 { margin: .4rem 0 .25rem; font-size: 1.5rem; color: var(--success); }
.crm-congrats-box p { margin: 0; color: var(--muted); font-size: .92rem; }

/* Tabela vira cartões no mobile */
@media (max-width: 640px) {
    .table thead { display: none; }
    .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
    .table tbody tr { border-bottom: 1px solid var(--card-border); padding: .5rem 0; }
    .table tbody td { border: none; padding: .35rem 1rem; display: flex; justify-content: space-between; gap: 1rem; }
    .table tbody td::before { content: attr(data-label); color: var(--muted); font-weight: 600; font-size: .8rem; }
    .table .ta-right { justify-content: flex-end; }
    .table .ta-right::before { display: none; }
}

/* ==============================================================
   Comunicação interna (chat estilo Teams)
   ============================================================== */
.im {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 1rem;
    height: calc(100vh - 190px);
    min-height: 460px;
    /* Anima só a coluna, não o conteúdo — o painel de mensagens reflui uma vez
       no fim em vez de a cada quadro. */
    transition: grid-template-columns .22s ease;
}
/* Recolhida: sobra uma faixa com o botão de voltar. Zerar a coluna esconderia
   também o único controle capaz de trazê-la de volta. */
.im.side-collapsed { grid-template-columns: 56px 1fr; }
.im.side-collapsed .im-side-head { justify-content: center; padding: .9rem .4rem .6rem; }
.im.side-collapsed #im-side-title,
.im.side-collapsed .im-side-acoes-ocultaveis,
.im.side-collapsed .im-search { display: none; }
.im.side-collapsed .im-side-toggle svg { transform: rotate(180deg); }

/* Recolhida, a lista continua ali — só os avatares. Esconder tudo deixaria uma
   faixa branca inútil e tiraria o acesso rápido às conversas, que é a razão de
   recolher em vez de fechar. */
.im.side-collapsed .im-convs { padding: .35rem .25rem; }
.im.side-collapsed .im-conv { justify-content: center; padding: .35rem; position: relative; }
.im.side-collapsed .im-conv-name,
.im.side-collapsed .im-conv-preview,
.im.side-collapsed .im-conv-actions { display: none; }
/* `contents` tira body e top do fluxo sem esconder o filho que resta (o balão
   de não lidas), que assim se posiciona pelo .im-conv. */
.im.side-collapsed .im-conv-body,
.im.side-collapsed .im-conv-top { display: contents; }
.im.side-collapsed .im-badge {
    position: absolute; top: .1rem; right: .1rem;
    min-width: 16px; padding: 0 .25rem; font-size: .62rem; line-height: 16px;
    text-align: center; box-shadow: 0 0 0 2px var(--card);
}
.im.side-collapsed .im-side-empty { display: none; }

.im-side-acoes-ocultaveis { display: flex; gap: .35rem; }
.im-side-toggle svg { transition: transform .22s ease; }

@media (max-width: 760px) {
    .im { grid-template-columns: 1fr; }
    .im-side { display: none; }
    .im.show-chat .im-side { display: none; }
    /* No celular a lista já ocupa a tela inteira e alterna com a conversa —
       recolher não faz sentido e a faixa só roubaria espaço. */
    .im.side-collapsed { grid-template-columns: 1fr; }
    .im-side-toggle { display: none; }
}

/* Sidebar */
.im-side {
    display: flex; flex-direction: column;
    background: var(--card); border: 1px solid var(--card-border);
    border-radius: var(--radius); overflow: hidden;
}
.im-side-head { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1rem .6rem; }
.im-side-head h1 { margin: 0; font-size: 1.15rem; }
.im-side-actions { display: flex; gap: .35rem; }
.im-btn {
    width: 32px; height: 32px; border: 1px solid var(--card-border); background: var(--surface);
    color: var(--muted); border-radius: 8px; cursor: pointer; font-size: 1rem; line-height: 1;
    display: grid; place-items: center;
}
.im-btn:hover { color: var(--primary); border-color: var(--primary); background: var(--card); }
.im-btn.active { border-color: var(--primary); background: var(--primary-soft); }
.im-search {
    margin: 0 1rem .6rem; padding: .5rem .7rem; border: 1px solid var(--card-border);
    border-radius: 9px; background: var(--surface); color: var(--text); font: inherit; outline: none;
}
.im-search:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); background: var(--card); }
.im-convs { flex: 1 1 auto; overflow-y: auto; padding: .25rem .5rem .75rem; }
.im-side-empty { color: var(--muted); font-size: .85rem; padding: 1rem; text-align: center; }
.im-conv {
    display: flex; gap: .6rem; align-items: center; width: 100%; text-align: left;
    padding: .55rem .6rem; border: none; background: none; border-radius: 10px; cursor: pointer;
}
.im-conv:hover { background: var(--surface); }
.im-conv.active { background: var(--primary-soft); }
.im-avatar {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center; color: #fff; font-weight: 600; font-size: .95rem;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
}
.im-avatar.group { background: linear-gradient(135deg, #4b5563, #6b7280); }
.im-avatar { overflow: hidden; }
.im-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.im-group-image-row { display: flex; align-items: center; gap: .8rem; }
.im-group-image-row .im-avatar { flex: 0 0 auto; }
.im-group-image-row input[type="file"] { flex: 1 1 auto; min-width: 0; }
.im-conv-body { flex: 1 1 auto; min-width: 0; }
.im-conv-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.im-conv-name { font-weight: 600; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.im-conv-preview { display: block; color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.im-badge { flex: 0 0 auto; background: var(--primary); color: #fff; font-size: .7rem; font-weight: 700; border-radius: 999px; padding: .05rem .4rem; }
.im-fav {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%; color: #c9bcbc; cursor: pointer;
    opacity: 0; transition: opacity .12s, color .12s, background .12s;
}
.im-conv:hover .im-fav { opacity: 1; }
.im-fav:hover { background: rgba(245, 158, 11, .14); color: #f59e0b; }
.im-fav.on { opacity: 1; color: #f59e0b; }
.im-fav:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.im-conv-actions { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .1rem; }
.im-arch {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%; color: #c9bcbc; cursor: pointer;
    opacity: 0; transition: opacity .12s, color .12s, background .12s;
}
.im-conv:hover .im-arch { opacity: 1; }
.im-arch:hover { background: rgba(16, 24, 40, .08); color: var(--primary); }
.im-arch:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* ================== Backoffice » Régua de Atuação ==================
   ⚠️ A posição dos marcos NÃO sai daqui nem de `style=""` (CSP): o servidor
   manda `data-pct` e o `regua.js` aplica por CSSOM. Aqui fica só a forma. */
.rg-card { display: flex; flex-direction: column; gap: .6rem; height: 100%; }
.rg-card-topo { display: flex; align-items: center; gap: .7rem; }
.rg-card-logo {
    flex: 0 0 auto; width: 48px; height: 48px; object-fit: contain;
    border-radius: 8px; background: var(--surface); padding: 4px;
}
.rg-card-logo-vazia {
    display: grid; place-items: center; font-weight: 700; font-size: 1.2rem;
    color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-hover)); padding: 0;
}
.rg-card-nome { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.rg-card-nome strong { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; }
.rg-card-acoes { margin-top: auto; }

/* ⚠️⚠️ A rolagem e a largura mínima valem SEMPRE, não só no celular. A régua
   se desmontava (rótulo saindo uma letra por linha, faixas sobrepostas) sempre
   que o espaço era estreito — e isso não acontece só em tela pequena: um modal
   de 460px numa tela de 1400px produz o mesmo aperto. Com `min-width` fixo, ela
   ROLA em vez de se espremer, em qualquer container. */
.rg-quadro { border: 1px solid var(--card-border); border-radius: var(--radius); padding: 1.2rem; background: var(--card); overflow-x: auto; }
.rg-linha, .rg-faixas { min-width: 560px; }
.rg-cabeca { display: flex; align-items: center; gap: 1rem; margin-bottom: .6rem; }
.rg-logo { flex: 0 0 auto; max-width: 150px; max-height: 60px; object-fit: contain; }
.rg-logo-vazia {
    display: grid; place-items: center; width: 150px; height: 60px; text-align: center;
    border: 1px dashed var(--control-border); border-radius: 8px;
    color: var(--muted); font-size: .72rem; padding: .3rem;
}
.rg-cabeca-tit { flex: 1 1 auto; min-width: 0; text-align: center; }
.rg-cabeca-tit h3 { margin: 0; font-size: 1.3rem; letter-spacing: .5px; text-transform: uppercase; }
.rg-cabeca-tit p { margin: .15rem 0 0; color: var(--muted); font-weight: 600; }

/* ⚠️ O recuo lateral fica no WRAPPER: elemento posicionado se apoia no
   *padding box* do pai, então um padding na própria `.rg-linha` seria ignorado
   pelo trilho e pelos marcos — e o rótulo das pontas voltaria a ser cortado. */
.rg-linha-wrap { padding: 0 100px; }

/* A linha do tempo. Altura fixa: os marcos são posicionados dentro dela.
   ⚠️ A geometria é encadeada — balão, pega, trilho e número precisam concordar:
   balão termina em 34 → pega de 46 começa em 40 e acaba em 86 (centro 63) →
   trilho em 59 (altura 8, centro 63) → o número vem em 93, e o degrau de baixo
   em 115. Mexer num sem os outros desalinha a régua (e o `regua.js` tem os
   degraus do número em `DEGRAUS_DIAS`). Os nomes deixaram de ocupar três
   degraus no topo — viraram balão —, por isso a linha encolheu de 190 para 140. */
.rg-linha { position: relative; height: 140px; margin: 2.4rem 0 .6rem; }
.rg-trilho { position: absolute; top: 59px; left: 0; right: 0; height: 8px; background: var(--text); border-radius: 4px; }
/* ⚠️⚠️ **O marco NÃO tem caixa** (`width: 0`), e isso é a correção da causa
   raiz. Com caixa fixa (170px) centrada no ponto, dois marcos próximos tinham
   as caixas sobrepostas e o texto se esmagava dentro delas — "uma letra por
   linha" no pior caso. Agora o rótulo é texto de largura NATURAL (`nowrap`),
   centrado por `transform`, e quem resolve colisão é o `regua.js`, que MEDE as
   caixas reais e distribui em degraus. CSS não sabe medir texto; JS sabe. */
.rg-marco { position: absolute; top: 0; bottom: 0; width: 0; }
/* ⚠️⚠️ O NOME é um BALÃO escondido (a pedido): aparece ao passar o mouse, ao
   focar pelo teclado, ao tocar (`.rg-aberto`, posto pelo JS) e durante o
   arrasto — um de cada vez, então os nomes nunca se encavalam. É
   `visibility`/`opacity`, NUNCA `display: none`: o `regua.js` mede o balão
   escondido para não deixá-lo sair pela ponta da régua. Ancorado por BAIXO
   (`bottom`): nome comprido cresce para cima, nunca por cima da pega.
   A tinta do texto é `--text` (o amarelo dos marcos reprova como texto); a cor
   do marco fica na borda de cima, por `--rg-cor`. */
.rg-marco-rotulo {
    position: absolute; bottom: calc(100% - 34px); left: 0; transform: translateX(-50%);
    width: max-content; max-width: 260px; white-space: normal; text-align: center;
    padding: .3rem .6rem; border-radius: 6px;
    background: var(--card); color: var(--text);
    border: 1px solid var(--control-border); border-top: 3px solid var(--rg-cor, currentColor);
    box-shadow: var(--shadow);
    font-weight: 700; font-size: .82rem; line-height: 1.25;
    visibility: hidden; opacity: 0; pointer-events: none;
    transition: opacity .12s ease, visibility .12s;
}
/* Foco só pelo TECLADO (`:focus-visible`), não `:focus-within`: tocar na pega
   já alterna `.rg-aberto`, e com o foco preso nela o segundo toque não fecharia. */
.rg-marco:hover .rg-marco-rotulo,
.rg-pega:focus-visible ~ .rg-marco-rotulo,
.rg-marco.rg-aberto .rg-marco-rotulo,
.rg-marco.rg-arrastando .rg-marco-rotulo { visibility: visible; opacity: 1; }
.rg-marco:hover, .rg-marco:focus-within, .rg-marco.rg-aberto { z-index: 4; }
@media (prefers-reduced-motion: reduce) { .rg-marco-rotulo { transition: none; } }
/* ⚠️ Fallback para quando o JS não roda (e para o harness de render): a
   alternância par/ímpar que o PHP marca. Com o JS, o `regua.js` espaça os
   marcos e só desce um número quando ele encosta no vizinho (`arrumarDias`). */
.rg-alt .rg-marco-dias { top: 115px; }
/* ⚠️ `left: 0` (e não 50%) porque o marco agora tem largura ZERO — com 50% a
   pega ficaria no mesmo lugar, mas o valor mentiria sobre a geometria. */
.rg-pega {
    position: absolute; top: 40px; left: 0; margin-left: -7px;
    width: 14px; height: 46px; border-radius: 4px; background: currentColor;
    cursor: grab; touch-action: none;
}
.rg-pega:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.rg-pega-fixa { cursor: pointer; touch-action: auto; }
.rg-marco.rg-arrastando .rg-pega { cursor: grabbing; }
.rg-marco.rg-arrastando { z-index: 3; }
.rg-marco.rg-salvando { opacity: .55; }
/* Geometria encadeada: ver `.rg-linha` (o número vem em 93, o degrau em 115). */
.rg-marco-dias {
    position: absolute; top: 93px; left: 0; transform: translateX(-50%);
    cursor: pointer;
    white-space: nowrap; padding: 0 6px;
    font-weight: 700; font-size: .88rem; color: var(--text);
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}

/* As cinco cores possíveis do marco. Cada uma é só a TINTA (a pega usa
   `currentColor`), então funcionam nos dois modos sem par fundo/texto. */
.rg-cor-verde    { color: #0f8a4d; --rg-cor: #0f8a4d; }
.rg-cor-amarelo  { color: #b8860b; --rg-cor: #b8860b; }
.rg-cor-vermelho { color: #c4351c; --rg-cor: #c4351c; }
.rg-cor-preto    { color: var(--text); --rg-cor: var(--text); }
.rg-cor-azul     { color: #1a63d6; --rg-cor: #1a63d6; }
.rg-dica { margin: -.6rem 0 .8rem; text-align: center; }

/* As duas faixas de atuação, logo abaixo da linha. */
.rg-faixas { position: relative; height: 66px; margin-bottom: 1.2rem; }
.rg-faixa {
    position: absolute; top: 0; height: 100%; display: flex; align-items: center; justify-content: center;
    border-top: 3px solid currentColor; padding: .35rem .3rem; text-align: center;
    font-weight: 700; font-size: .74rem; letter-spacing: .3px;
}
/* ⚠️ A faixa depois da virada costuma ser ESTREITA (a atuação da Norton Nunes é
   o trecho final da régua). Com `nowrap` + ellipsis, "ATUAÇÃO NORTON NUNES"
   virava "ATUAÇÃO N…" — o nome de quem atua, cortado. Quebrar em duas linhas
   cabe na altura da faixa e funciona em qualquer largura. */
.rg-faixa span { line-height: 1.15; overflow-wrap: break-word; }
.rg-faixa-op { left: 0; color: #0f8a4d; }
.rg-faixa-nn { color: var(--primary); }
/* Só uma faixa na régua (sem virada, ou virada no dia 0): ela ocupa a linha
   inteira pelo CSS — o `regua.js` só divide quando existem as duas. */
.rg-faixa.rg-faixa-cheia { left: 0; width: 100%; }
/* Atalho para o formulário de textos, no canto do cabeçalho do quadro. */
.rg-editar-textos { flex: 0 0 auto; align-self: flex-start; }

.rg-obs { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--card-border); }
.rg-obs ul { margin: .3rem 0; padding-left: 1.1rem; }
.rg-rodape {
    margin-top: 1rem; padding: .7rem; border-radius: 8px; text-align: center;
    background: var(--primary); color: #fff; font-weight: 700; font-size: 1.05rem;
}

/* Edição dos marcos: cada linha da tabela é um formulário. */
.rg-td-form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.rg-form-marco { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; flex: 1 1 auto; }
.rg-form-marco input[type="text"] { flex: 1 1 180px; min-width: 0; }
.rg-in-dias { width: 90px; flex: 0 0 auto; }
.rg-form-excluir { flex: 0 0 auto; }
.op-logo-row { display: flex; align-items: center; gap: .8rem; }
.op-logo-previa {
    flex: 0 0 auto; display: grid; place-items: center; width: 64px; height: 44px;
    border: 1px solid var(--card-border); border-radius: 6px; background: var(--surface);
    color: var(--muted); font-size: .68rem; overflow: hidden;
}
.op-logo-previa img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* No celular a régua não cabe: rola na horizontal, sem espremer os marcos. */
/* ⚠️ Aqui fica SÓ o que é específico de tela pequena. A rolagem e a largura
   mínima da régua subiram para a regra base (não são exclusividade do celular:
   um modal estreito numa tela larga aperta igual) — repeti-las aqui criaria
   duas fontes para a mesma decisão, e a segunda é a que alguém esquece. */
@media (max-width: 760px) {
    .rg-linha-wrap { padding: 0 70px; }
}

/* Alça de reordenar os favoritos (só aparece em conversa favoritada).
   ⚠️ `touch-action: none` é o que permite arrastar no celular: sem isso o
   navegador trata o gesto como rolagem da lista e o item não sai do lugar.
   Fica SÓ na alça — a lista continua rolando normalmente pelo resto do item. */
.im-fav-drag {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 26px; color: #c9bcbc; cursor: grab;
    opacity: .35; touch-action: none; transition: opacity .12s, color .12s;
}
.im-conv:hover .im-fav-drag { opacity: 1; }
.im-fav-drag:active { cursor: grabbing; }
.im-conv.im-arrastando {
    opacity: .6; cursor: grabbing;
    /* ⚠️ Sem isto, `elementFromPoint` devolveria o próprio item arrastado e
       ele nunca encontraria o vizinho sob o cursor. */
    pointer-events: none;
}

/* Painel principal */
.im-main {
    display: flex; flex-direction: column; min-width: 0;
    background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); overflow: hidden;
}
.im-empty { margin: auto; text-align: center; color: var(--muted); }
.im-empty-mark { font-size: 2.5rem; }
.im-chat { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.im-chat-head {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
    padding: .8rem 1.1rem; border-bottom: 1px solid var(--card-border);
}
.im-chat-title { font-weight: 700; font-size: 1.02rem; }
.im-chat-sub { color: var(--muted); font-size: .8rem; margin-left: .6rem; }
.im-chat-actions { display: flex; gap: .35rem; flex: 0 0 auto; }
.im-btn-danger:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }

/* Barra de pesquisa dentro da conversa */
.im-search-bar {
    display: flex; align-items: center; gap: .5rem;
    padding: .55rem .8rem; border-bottom: 1px solid var(--card-border); background: var(--surface);
}
.im-search-bar > svg { color: var(--muted); flex: none; }
.im-search-bar input { flex: 1 1 auto; border: none; background: none; outline: none; font-size: .92rem; color: var(--text); }
.im-search-count { font-size: .8rem; color: var(--muted); min-width: 2.6rem; text-align: right; font-variant-numeric: tabular-nums; }
.im-search-nav {
    flex: none; width: 1.8rem; height: 1.8rem; border-radius: 8px; cursor: pointer;
    border: 1px solid transparent; background: none; color: var(--muted); font-size: .9rem; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s;
}
.im-search-nav:hover { background: rgba(16,24,40,.06); color: var(--text); }

.im-messages { flex: 1 1 auto; overflow-y: auto; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; }
mark.im-mark { background: #ffe08a; color: inherit; border-radius: 3px; padding: 0 1px; }
.im-msg.im-hit .im-bubble { box-shadow: 0 0 0 2px rgba(217,119,6,.35); }
.im-msg.is-current .im-bubble { box-shadow: 0 0 0 2px var(--primary); }
.im-loading { color: var(--muted); font-size: .88rem; margin: auto; }
.im-msg { display: flex; gap: .55rem; max-width: 78%; }
.im-msg.mine { align-self: flex-end; flex-direction: row-reverse; }

/* Link dentro da mensagem. Sublinhado sempre: numa bolha colorida, só a cor
   não distingue link de texto para quem não enxerga bem contraste. */
.im-msg-text a.im-link {
    color: inherit; text-decoration: underline; text-underline-offset: 2px;
    /* Endereço longo não pode empurrar a largura da bolha. */
    overflow-wrap: anywhere;
}
.im-msg-text a.im-link:hover { text-decoration-thickness: 2px; }
/* Destino no aviso: monoespaçado e quebrando, para conferir caractere a
   caractere antes de sair do sistema. */
.im-link-alvo {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .82rem; overflow-wrap: anywhere; margin: .2rem 0 .8rem;
    padding: .5rem .6rem; border-radius: 8px;
    background: var(--surface); border: 1px solid var(--card-border);
}

/* Divisor de dia ("Hoje", "Ontem", "sábado"). A lista de mensagens é um flex
   column com as bolhas alinhadas por `align-self`; o divisor precisa de
   `align-self: center` e largura própria para não herdar o alinhamento da
   mensagem anterior. A linha atravessa o texto por trás — daí o fundo opaco
   no rótulo, e não um `<hr>` de cada lado. */
.im-dia {
    /* O .im-messages já tem gap de .5rem; margem grande aqui somaria aos dois. */
    align-self: stretch; position: relative; text-align: center; margin: .25rem 0;
}
.im-dia::before {
    content: ""; position: absolute; left: 0; right: 0; top: 50%;
    border-top: 1px solid var(--card-border);
}
.im-dia-txt {
    position: relative; display: inline-block;
    padding: .12rem .7rem; border-radius: 999px;
    background: var(--card); border: 1px solid var(--card-border);
    font-size: .72rem; font-weight: 600; color: var(--muted);
    text-transform: capitalize;   /* toLocaleDateString devolve "sábado" em minúscula */
}
.im-msg-avatar {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center; color: #fff; font-size: .8rem; font-weight: 600;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
}
.im-msg-avatar.im-avatar-img { object-fit: cover; background: var(--surface); }
.im-bubble { position: relative; background: var(--surface); border: 1px solid var(--card-border); border-radius: 14px; padding: .5rem .75rem; }
.im-msg.mine .im-bubble { background: var(--primary-soft); }
/* Enquete dentro da conversa (grupos) */
.im-poll { min-width: 240px; }
.im-poll-q { font-weight: 600; font-size: .92rem; margin-bottom: .45rem; }
.im-poll-opt {
    position: relative; display: flex; align-items: center; gap: .5rem; width: 100%;
    margin-bottom: .3rem; padding: .4rem .55rem; cursor: pointer; overflow: hidden;
    border: 1px solid var(--card-border); border-radius: 8px; background: var(--card);
    font-family: inherit; font-size: .85rem; text-align: left;
}
.im-poll-opt:disabled { cursor: default; }
.im-poll-opt:not(:disabled):hover { border-color: var(--primary); }
.im-poll-opt.is-mine { border-color: var(--primary); font-weight: 600; }
.im-poll-bar {
    position: absolute; left: 0; top: 0; bottom: 0; z-index: 0;
    background: var(--primary-soft); transition: width .25s;
}
.im-poll-txt { position: relative; z-index: 1; flex: 1 1 auto; }
.im-poll-n { position: relative; z-index: 1; flex: 0 0 auto; color: var(--muted); font-size: .78rem; }
.im-poll-foot {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    margin-top: .35rem; color: var(--muted); font-size: .75rem;
}
/* Com "Quem votou" o rodapé passa a ter 2 botões: o contador empurra os dois
   para a direita, senão o space-between os espalharia longe um do outro. */
.im-poll-foot > span { margin-right: auto; }
.im-poll-close,
.im-poll-who { border: 0; background: none; cursor: pointer; color: var(--primary); font: inherit; font-size: .75rem; }
.im-poll-who { white-space: nowrap; }
.im-poll-who-q { margin: 0 0 .6rem; font-weight: 600; }
.im-poll-optrow { display: flex; align-items: center; gap: .4rem; margin-bottom: .35rem; }
.im-poll-optrow input { flex: 1 1 auto; min-width: 0; }

/* @menção dentro do texto + destaque da mensagem que cita VOCÊ */
.im-mention { color: var(--primary); background: var(--primary-soft); border-radius: 5px; padding: 0 .15rem; font-weight: 600; }
.im-msg.mentions-me .im-bubble { border-color: var(--primary); box-shadow: inset 3px 0 0 var(--primary); background: #fffaf5; }
.im-msg.mentions-me.mine .im-bubble { background: var(--primary-soft); }

/* Controles no hover da mensagem (reagir / responder) */
.im-msg-tools {
    position: absolute; top: -12px; z-index: 2; display: flex; gap: .2rem;
    opacity: 0; transition: opacity .15s;
}
.im-msg:not(.mine) .im-msg-tools { right: -6px; }
.im-msg.mine .im-msg-tools { left: -6px; }
.im-msg:hover .im-msg-tools, .im-msg:focus-within .im-msg-tools { opacity: 1; }
.im-tool {
    width: 26px; height: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--card-border); background: var(--card); color: var(--muted);
    cursor: pointer; transition: color .15s, transform .1s; box-shadow: var(--shadow-sm);
}
.im-tool:hover { color: var(--primary); transform: scale(1.08); }

/* Bloco citado dentro do balão (resposta) */
.im-quote {
    display: block; margin-bottom: .35rem; padding: .25rem .5rem;
    border-left: 3px solid var(--primary); border-radius: 6px;
    background: rgba(16,24,40,.05); cursor: pointer; max-width: 100%;
}
.im-msg.mine .im-quote { background: rgba(153,54,53,.08); }
.im-quote-author { display: block; font-size: .74rem; font-weight: 700; color: var(--primary); }
.im-quote-text { display: block; font-size: .82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Barra "respondendo a" no compositor */
.im-reply-bar {
    display: flex; align-items: center; gap: .5rem;
    padding: .4rem .6rem; margin-bottom: .4rem; border-radius: 10px;
    background: var(--surface); border-left: 3px solid var(--primary);
}
.im-reply-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.im-reply-to { font-size: .74rem; font-weight: 700; color: var(--primary); }
.im-reply-snippet { font-size: .82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Realce ao pular para a mensagem citada */
.im-msg.im-flash .im-bubble { animation: im-flash 1.2s ease; }
@keyframes im-flash { 0%, 60% { box-shadow: 0 0 0 3px var(--ring); } 100% { box-shadow: none; } }

/* Chips de reação dentro do balão */
.im-reacts { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .35rem; }
.im-react-chip {
    display: inline-flex; align-items: center; gap: .2rem;
    padding: .05rem .4rem; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--card-border); background: var(--card); font-size: .8rem; line-height: 1.4;
}
.im-react-chip .im-chip-n { color: var(--muted); font-weight: 600; font-size: .72rem; }
.im-react-chip.mine { border-color: var(--primary); background: var(--primary-soft); }
.im-react-chip.mine .im-chip-n { color: var(--primary); }

/* Picker flutuante de emojis */
.im-emoji-pop {
    position: fixed; z-index: 1000; background: var(--card);
    border: 1px solid var(--card-border); border-radius: 14px; box-shadow: var(--shadow);
    padding: .4rem; max-width: 300px;
}
.im-emoji-quick { display: flex; align-items: center; gap: .1rem; }
.im-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: .1rem; margin-top: .35rem; max-height: 200px; overflow-y: auto; }
.im-emoji {
    border: none; background: none; cursor: pointer; font-size: 1.25rem; line-height: 1;
    width: 34px; height: 34px; border-radius: 8px; transition: background .12s, transform .1s;
}
.im-emoji:hover { background: rgba(16,24,40,.06); transform: scale(1.15); }
.im-emoji-more { font-size: 1.1rem; color: var(--muted); }
.im-msg-author { font-size: .76rem; font-weight: 700; color: var(--primary); margin-bottom: .15rem; }
/* ⚠️ `pre-wrap`: mensagens coladas em várias linhas ANTES da correção foram
   gravadas com "\n" cru no HTML, e sem isto apareciam numa linha só. As novas
   já chegam com <br> (`ChatHtml::clean` + o colar do `comunicacao.js`). */
.im-msg-text { font-size: .94rem; line-height: 1.5; word-wrap: break-word; white-space: pre-wrap; }
.im-msg-time { font-size: .68rem; color: var(--muted); margin-top: .25rem; display: flex; align-items: center; justify-content: flex-end; gap: .3rem; }
.im-time-txt { line-height: 1; }
/* Olho — quem leu */
/* Selo "editada" no rodapé da bolha (mesmo lugar do WhatsApp, antes da hora). */
.im-edited { font-style: italic; opacity: .75; }
/* A barra de edição reusa .im-reply-bar; só a faixa lateral muda de cor,
   para não parecer que você está respondendo alguém. */
.im-edit-bar { border-left-color: var(--muted); }
.im-eye { border: none; background: none; color: var(--muted); cursor: pointer; padding: 0; display: inline-flex; opacity: .6; transition: opacity .15s, color .15s; }
.im-eye:hover { opacity: 1; color: var(--primary); }
/* Tiques (WhatsApp): enviado (✓) → entregue (✓✓ cinza) → lido (✓✓ verde) */
.im-ticks { display: inline-flex; color: var(--muted); line-height: 1; }
.im-ticks-read { color: #12a150; }
/* Painel "quem leu" */
.im-read-body { display: flex; flex-direction: column; gap: 1rem; }
.im-read-group { display: flex; flex-direction: column; gap: .2rem; }
.im-read-h { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin: 0 0 .2rem; }
.im-read-item { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .4rem .1rem; border-bottom: 1px solid var(--card-border); }
.im-read-item:last-child { border-bottom: none; }
.im-read-item.read .im-read-name::before { content: "✓✓ "; color: #12a150; font-weight: 700; }
.im-read-item.delivered .im-read-name::before { content: "✓✓ "; color: var(--muted); font-weight: 700; }
.im-read-item:not(.read):not(.delivered) .im-read-name::before { content: "✓ "; color: var(--muted); }
.im-read-when { font-size: .78rem; color: var(--muted); white-space: nowrap; }
/* Estrela de admin no modal do grupo */
.im-member-row { display: flex; align-items: center; gap: .4rem; }
.im-member-name { flex: 1 1 auto; }
.im-admin-toggle { border: none; background: none; cursor: pointer; font-size: 1rem; line-height: 1; color: #d0c4c4; padding: 0 .15rem; }
.im-admin-toggle[aria-pressed="true"] { color: #e0a800; }
.im-member-row.is-admin .im-member-name::after { content: " admin"; font-size: .7rem; color: #b58900; font-weight: 600; }

.im-att-img img { max-width: 240px; max-height: 240px; border-radius: 10px; display: block; margin-top: .3rem; }
/* Imagem esperando a vez (img-lazy.js): caixa reservada do tamanho típico de uma
   miniatura, para a conversa não pular quando ela chega. `is-carregando` cobre o
   intervalo entre o pedido e a chegada — sem ele a imagem passaria por 1×1 (o
   GIF transparente do `src`) e a bolha encolheria antes de crescer. */
.im-att-img img[data-lazy-src],
.im-att-img img.is-carregando {
    width: 180px; height: 135px;
    background: var(--surface); border: 1px solid var(--card-border);
}
.im-att-file { display: flex; align-items: center; gap: .5rem; margin-top: .3rem; text-decoration: none; color: var(--text); background: var(--card); border: 1px solid var(--card-border); border-radius: 10px; padding: .45rem .6rem; }
.im-att-file:hover { border-color: var(--primary); }
.im-att-ic { font-size: 1.1rem; }
.im-att-meta { display: flex; flex-direction: column; min-width: 0; }
.im-att-name { font-size: .85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.im-att-size { font-size: .72rem; color: var(--muted); }

/* Áudio anexado — toca no próprio balão, com o download logo abaixo */
.im-att-audio {
    display: flex; flex-direction: column; gap: .25rem; margin-top: .35rem;
    max-width: 280px;
}
.im-att-audio audio { width: 100%; height: 36px; display: block; }
.im-att-audio-baixar {
    display: flex; align-items: baseline; gap: .35rem;
    font-size: .76rem; color: var(--muted); text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.im-att-audio-baixar:hover { color: var(--primary); }

/* Composer */
.im-composer { position: relative; flex: 0 0 auto; border-top: 1px solid var(--card-border); padding: .6rem .8rem .8rem; }
/* Lista de sugestões de @menção (sobe acima do compositor) */
.im-mention-list {
    position: absolute; z-index: 40; left: .8rem; right: .8rem; bottom: 100%;
    margin-bottom: .3rem; max-height: 200px; overflow-y: auto;
    background: var(--card); border: 1px solid var(--card-border);
    border-radius: 10px; box-shadow: var(--shadow);
}
.im-mention-item {
    display: block; width: 100%; text-align: left; cursor: pointer; border: 0; background: none;
    padding: .45rem .65rem; font-family: inherit; font-size: .88rem;
}
.im-mention-item:hover, .im-mention-item.is-active { background: var(--primary-soft); }
.im-composer-row { display: flex; align-items: flex-end; gap: .5rem; }
.im-attach-btn, .im-send {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 9px; cursor: pointer; display: grid; place-items: center;
}
.im-attach-btn { border: 1px solid var(--card-border); background: var(--surface); color: var(--muted); }
.im-attach-btn:hover { color: var(--primary); border-color: var(--primary); }
.im-send { border: none; background: var(--primary); color: #fff; }
.im-send:hover { background: var(--primary-hover); }
/* Compositor: contenteditable (aceita negrito/itálico/sublinhado/cor) */
.im-composer .im-input {
    flex: 1 1 auto; min-width: 0; border: 1px solid var(--card-border); border-radius: 10px;
    padding: .55rem .8rem; font: inherit; font-size: .95rem; background: var(--surface); color: var(--text);
    outline: none; max-height: 140px; overflow-y: auto; line-height: 1.45;
    white-space: pre-wrap; word-break: break-word;
}
.im-composer .im-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); background: var(--card); }
.im-composer .im-input:empty::before {
    content: attr(data-placeholder); color: var(--muted); pointer-events: none;
}

/* Backoffice » Negativação */
/* Cabeçalho de card com título à esquerda e "+ Adicionar" à direita.
   Negativação e Notificação usam o mesmo arranjo. */
.neg-head,
.nt-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
/*
 * Título da aba + o link de acesso do canal, na mesma linha do "+ Adicionar".
 * `min-width: 0` no bloco da esquerda é o que permite a URL truncar em vez de
 * empurrar o botão da direita para fora do cartão — item de flex nasce com
 * `min-width: auto` e não encolhe abaixo do conteúdo.
 */
.neg-head-tit { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; min-width: 0; }
.neg-link { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; }
.neg-link-tem { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; }
.neg-link-form { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; }
/*
 * ⚠️ A URL é TRUNCADA de propósito: endereço de portal passa de 200 caracteres
 * (o do SharePoint, no módulo vizinho, esmagava a tabela inteira). O texto
 * completo fica no `title` e no `<span hidden>` que o botão Copiar lê.
 */
.neg-link-url {
    max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: .84rem; color: var(--primary); font-weight: 600; text-decoration: none;
}
.neg-link-url:hover, .neg-link-url:focus-visible { text-decoration: underline; }
.neg-link-vazio { font-size: .82rem; color: var(--muted); }
.neg-link-input { min-width: 260px; font-size: .88rem; padding: .32rem .5rem; }
.neg-link-lapis { line-height: 1; padding: .3rem .45rem; }

/* ---- RH » ficha: valores derivados e linhas de dependente ---- */
/*
 * Data + o valor CALCULADO ao lado (idade, fim da experiência). O `min-width: 0`
 * no input é o que permite o selo caber sem empurrar nada para fora da coluna.
 */
.rh-com-derivado { display: flex; align-items: center; gap: .5rem; }
.rh-com-derivado input { min-width: 0; flex: 1 1 auto; }
/*
 * ⚠️ Selo de valor derivado: fundo E tinta próprios. Superfície clara que só
 * declara `background` herda `var(--text)` e SOME no modo escuro — é o teste
 * que o CLAUDE.md registra, e foi assim que as bolhas do chamado sumiram.
 */
.rh-derivado {
    flex: 0 0 auto; white-space: nowrap; padding: .18rem .5rem; border-radius: 999px;
    font-size: .76rem; font-weight: 600; background: #eef2f6; color: #55606e;
}
.rh-derivado:empty { display: none; }

.rh-dep-existentes { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.rh-dep-existentes li { font-size: .88rem; }
.rh-dep-existentes .hint { margin-left: .4rem; }
/*
 * A linha de dependente é um grid próprio (não o `.form-grid`): são cinco
 * campos de larguras bem diferentes, e o último é um bloco de caixas de marcar.
 */
.rh-dep-linha {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: .5rem .7rem; align-items: start;
    padding: .6rem 0; border-top: 1px solid var(--card-border);
}
.rh-dep-linha:first-child { border-top: 0; padding-top: 0; }
.rh-dep-linha > .ff { min-width: 0; }
/*
 * ⚠️⚠️ `> .ff > label`, e NUNCA `.rh-dep-linha label` solto. O seletor
 * pega-tudo alcançava também os `<label class="check">` das caixas de marcar:
 * `display: block` derrubava o `display: flex` do `.check` (0,1,1 contra
 * 0,1,0) e os três rótulos se sobrepunham. O print pegou — é a mesma armadilha
 * já registrada em `.field label` sobre a `.member-grid`.
 */
.rh-dep-linha > .ff > label { display: block; font-size: .78rem; font-weight: 600; color: var(--muted); margin-bottom: .25rem; }
/*
 * ⚠️ As três caixas ocupam a LINHA INTEIRA, e não uma 5ª coluna `auto`.
 * Como 5ª coluna elas se sobrepunham: `1fr` é `minmax(auto, 1fr)`, então as
 * quatro colunas de campo espremiam a `auto` até o min-content e "Sal. família"
 * e "Plano" passavam por cima uma da outra. O print pegou.
 */
.rh-dep-flags { grid-column: 1 / -1; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
/* Reafirma o flex: se um seletor de rótulo voltar a alcançar o `.check`, é
   aqui que a defesa fica — e com especificidade maior que a do pega-tudo. */
.rh-dep-flags .check { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: .82rem; white-space: nowrap; }
@media (max-width: 860px) {
    /* Empilha: quatro colunas num celular deixam cada campo com 70px. */
    .rh-dep-linha { grid-template-columns: 1fr; }
}

/* ---- Conversas » galeria de arquivos da conversa ---- */
.im-files-body { max-height: 60vh; overflow-y: auto; }
.im-files-resumo { margin: 0 0 .8rem; }
.im-files-sec { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 1rem 0 .5rem; }
.im-files-sec:first-of-type { margin-top: 0; }
/* `auto-fill` com `minmax`: a grade se ajusta sozinha da largura do modal ao
   celular, sem breakpoint próprio. */
.im-files-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .5rem; }
.im-files-img {
    position: relative; display: block; aspect-ratio: 1; overflow: hidden;
    border: 1px solid var(--card-border); border-radius: 10px; background: var(--surface);
    text-decoration: none;
}
.im-files-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.im-files-img:hover { border-color: var(--primary); }
/* Legenda sobre a foto: fundo escuro fixo com texto branco — é sobreposição de
   imagem, não superfície do tema, então não acompanha claro/escuro. */
.im-files-img-leg {
    position: absolute; left: 0; right: 0; bottom: 0; padding: .15rem .3rem;
    font-size: .64rem; color: #fff; background: rgba(0, 0, 0, .55);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.im-files-lista { display: flex; flex-direction: column; gap: .3rem; }
.im-files-item {
    display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem;
    border: 1px solid var(--card-border); border-radius: 10px;
    text-decoration: none; color: var(--text); min-width: 0;
}
.im-files-item:hover { border-color: var(--primary); background: var(--surface); }
.im-files-ic { font-size: 1.1rem; line-height: 1; flex: 0 0 auto; }
/* `min-width: 0` para o nome comprido truncar em vez de esticar a linha. */
.im-files-txt { display: flex; flex-direction: column; min-width: 0; }
.im-files-txt strong { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.im-files-meta { font-size: .76rem; color: var(--muted); }

/* ---- Negativação » Agenda ---- */
.neg-ag-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; flex-wrap: wrap; }
.neg-ag-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-bottom: .9rem; }
/*
 * A legenda virou FILTRO: cada selo é um link que liga/desliga o status (`?st=`).
 * ⚠️ Cor nunca é o único sinal: o escolhido ganha ✓ e anel na cor do próprio
 * selo; os demais ficam em cinza com `grayscale`, que preserva a LUMINÂNCIA —
 * o contraste do texto continua o mesmo (esmaecer com `opacity` o derrubaria
 * abaixo de 4,5:1). O selo define a própria tinta, então sobrevive ao escuro.
 */
.neg-ag-filtro-rot { font-size: .8rem; font-weight: 600; color: var(--text); margin-right: .15rem; }
a.neg-st.neg-ag-filtro {
    display: inline-flex; align-items: center; gap: .35rem;
    text-decoration: none; cursor: pointer; transition: box-shadow .15s ease, filter .15s ease;
}
a.neg-st.neg-ag-filtro:hover { box-shadow: 0 0 0 1px currentColor; }
a.neg-st.neg-ag-filtro.is-on { box-shadow: 0 0 0 2px currentColor; }
a.neg-st.neg-ag-filtro:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.neg-ag-legenda.is-filtrando a.neg-ag-filtro:not(.is-on) { filter: grayscale(1); }
.neg-ag-qtd {
    min-width: 1.3rem; padding: 0 .35rem; border-radius: 999px; text-align: center;
    background: rgba(255, 255, 255, .75); font-size: .7rem; font-weight: 700;
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
.neg-ag-limpar { margin-left: .3rem; font-size: .8rem; font-weight: 600; color: var(--primary); text-decoration: none; }
.neg-ag-limpar:hover, .neg-ag-limpar:focus-visible { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
    a.neg-st.neg-ag-filtro { transition: none; }
}
/* "Lançado por … em 16/09/2026 14:32" no modal (mig. 142). */
.neg-ag-quando { font-size: .85rem; }
.neg-ag-sem-excluir { margin: 1rem 0 0; }
.neg-ag-dow { margin: 0; padding: .45rem 0; font-size: .92rem; color: var(--text); }
/* O "+" do dia: discreto até o mouse chegar na célula. */
.rh-cal-dia .neg-ag-add {
    float: right; text-decoration: none; color: var(--muted); font-weight: 700;
    line-height: 1; padding: 0 .2rem; border-radius: 5px; opacity: 0;
}
.rh-cal-dia:hover .neg-ag-add,
.neg-ag-add:focus-visible { opacity: 1; }
.neg-ag-add:hover { background: var(--primary-soft); color: var(--primary); }
/* "+N no dia" abre o restante SEM JavaScript: checkbox escondido + irmãos (CSP).
   ⚠️ Classes próprias da agenda — `.rh-cal-mais` continua como estava, porque a
   agenda do RH usa a mesma folha e lá o "+N" é só texto. */
.neg-ag-mais-chk { position: absolute; opacity: 0; width: 0; height: 0; }
/* ⚠️⚠️ Seletor DOBRADO (`.rh-cal-ev.neg-ag-extra`), como nas cores acima: a base
   `.rh-cal-ev` declara `display: block` e mora MAIS ABAIXO neste arquivo — com
   uma classe só a de baixo vencia e o dia abria TODOS os lançamentos de cara,
   sem erro nenhum. Foi o print que mostrou, de novo. */
.rh-cal-ev.neg-ag-extra { display: none; }
.neg-ag-mais, .neg-ag-menos { font-size: .66rem; color: var(--muted); padding-left: .25rem; cursor: pointer; }
.neg-ag-mais { display: block; }
.neg-ag-menos { display: none; }
.neg-ag-mais:hover, .neg-ag-menos:hover { color: var(--primary); text-decoration: underline; }
.neg-ag-mais-chk:checked ~ .rh-cal-ev.neg-ag-extra { display: block; }
.neg-ag-mais-chk:checked ~ .neg-ag-mais { display: none; }
.neg-ag-mais-chk:checked ~ .neg-ag-menos { display: block; }
/* O checkbox é invisível mas continua no Tab: o foco precisa aparecer no rótulo. */
.neg-ag-mais-chk:focus-visible ~ .neg-ag-mais,
.neg-ag-mais-chk:focus-visible ~ .neg-ag-menos { outline: 2px solid var(--primary); outline-offset: 1px; border-radius: 4px; }
@media print {
    /* No papel não há o que clicar: o dia sai inteiro. */
    .rh-cal-ev.neg-ag-extra { display: block; }
    .neg-ag-mais, .neg-ag-menos { display: none; }
}
/* Repetição (mig. 119): marca no calendário e os dois botões de excluir lado a lado. */
.neg-ag-rep { color: var(--muted); font-weight: 700; }
.neg-ag-excluir { display: flex; flex-wrap: wrap; gap: .5rem; }

/*
 * ⚠️⚠️ Selos de situação da agenda — CINCO tons, não uma cor por status.
 * São nove situações, e nove pares fundo/tinta seriam nove medições de
 * contraste nos dois modos, com o próximo status entrando sem cor.
 *
 * ⚠️ Cada um define a PRÓPRIA cor de texto. É o teste que o CLAUDE.md registra:
 * superfície clara que só define `background` herda `var(--text)` e some no
 * modo escuro — foi assim que as bolhas do chamado e do WhatsApp sumiram em
 * produção. Definindo as duas, o selo sobrevive sem regra no bloco escuro.
 */
.neg-st {
    display: inline-block; padding: .16rem .5rem; border-radius: 999px;
    font-size: .74rem; font-weight: 600; line-height: 1.5;
}
.neg-st-ok     { background: #e7f6ec; color: #1a7f42; }
.neg-st-info   { background: #e7f0ff; color: #1a63d6; }
/* ⚠️ `#9a5a09`, e não o `#a8620a` das pílulas do financeiro: sobre ESTE fundo
   aquele mede 4,36:1 e reprova em AA. Medido, não escolhido por parecer igual. */
.neg-st-alerta { background: #fff4e0; color: #9a5a09; }
.neg-st-parado { background: #fdecec; color: #b32020; }
.neg-st-mudo   { background: #eef2f6; color: #55606e; }

/*
 * Faixa de cor do item no calendário — `border-left` e não fundo, porque a
 * célula é pequena e um fundo colorido por item brigaria com o `is-hoje` e o
 * `is-fds`.
 *
 * ⚠️⚠️ **O seletor é DOBRADO (`.rh-cal-ev.neg-ag-*`) de propósito.** A base
 * `.rh-cal-ev` declara `border-left: 3px solid var(--primary)` e mora MAIS
 * ABAIXO neste arquivo: com uma classe só (0,1,0 contra 0,1,0), a de baixo
 * vencia e TODOS os itens saíam vinho — a cor da situação sumia sem erro
 * nenhum, e o print foi o que mostrou. Especificidade resolve
 * independentemente da ordem; mover o bloco para o fim só adiaria o problema
 * até alguém acrescentar outra regra depois. Mesma armadilha já registrada nas
 * duas regras `.im-emoji-pop`.
 */
.rh-cal-ev.neg-ag-ok     { border-left-color: #1a7f42; }
.rh-cal-ev.neg-ag-info   { border-left-color: #1a63d6; }
.rh-cal-ev.neg-ag-alerta { border-left-color: #9a5a09; }
.rh-cal-ev.neg-ag-parado { border-left-color: #b32020; }
.rh-cal-ev.neg-ag-mudo   { border-left-color: #55606e; }
@media (max-width: 760px) {
    /* Na coluna estreita a URL não pode competir com o botão de adicionar. */
    .neg-link-url { max-width: 150px; }
    .neg-link-input { min-width: 0; width: 100%; }
}
.neg-senha-wrap { display: flex; gap: .4rem; align-items: center; }
.neg-senha-wrap input { flex: 1 1 auto; min-width: 0; }
.neg-oculta { letter-spacing: .12em; color: var(--muted); }

/* Senha/palavra secreta em texto + botão de copiar. */
.neg-segredo {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .88rem;
    word-break: break-all;
}
.neg-copiavel { word-break: break-all; }
.neg-copiar {
    margin-left: .35rem;
    padding: .1rem .25rem;
    border: 0;
    background: none;
    color: var(--muted);
    cursor: pointer;
    line-height: 1;
    vertical-align: -2px;
    border-radius: 4px;
    transition: color .15s, background .15s;
}
.neg-copiar:hover { color: var(--primary); background: var(--primary-soft); }
.neg-copiar.is-ok { color: var(--success); font-weight: 700; font-size: .85rem; }
.neg-inativo { opacity: .55; }
/* Célula editável na própria linha (ex.: Operante?) */
.neg-inline {
    border: 1px dashed transparent; background: none; cursor: pointer;
    padding: .1rem .35rem; border-radius: 6px; font: inherit; color: inherit;
}
.neg-inline:hover { border-color: var(--card-border); background: var(--surface); color: var(--primary); }
.neg-inline-sel { padding: .15rem .3rem; font-size: .85rem; max-width: 110px; }
.neg-lapis { margin-left: .3rem; vertical-align: -1px; opacity: .35; transition: opacity .15s; }
.neg-inline:hover .neg-lapis { opacity: 1; }

/* Miniatura do anexo (print colado, foto) */
.chip-thumb {
    width: 30px; height: 30px; object-fit: cover; border-radius: 6px;
    border: 1px solid var(--card-border); flex: 0 0 auto;
}
/* Com miniatura o chip deixa de ser pílula e encosta na imagem. */
.im-attach-chip:has(.chip-thumb:not([hidden])) {
    border-radius: 10px;
    padding: .25rem .5rem .25rem .25rem;
}

/* Caixa de formatação (abre pelo botão "T", ao lado do emoji) */
.im-fmt-wrap { position: relative; display: inline-block; flex: 0 0 auto; }
.im-fmt-pop {
    position: absolute; z-index: 45; bottom: calc(100% + 8px); left: 0;
    display: flex; align-items: center; gap: .15rem; padding: .3rem;
    background: #6c6868; border: 1px solid var(--card-border);
    border-radius: 10px; box-shadow: var(--shadow); white-space: nowrap;
}
.im-fmt {
    min-width: 30px; height: 28px; padding: 0 .45rem; cursor: pointer;
    border: 1px solid transparent; border-radius: 7px; background: none;
    color: #ffffff; font-size: .88rem; line-height: 1;
}
.im-fmt:hover { background: var(--surface); border-color: var(--card-border); color: var(--primary); }
.im-fmt-sep { width: 1px; height: 18px; background: var(--card-border); margin: 0 .25rem; }

.im-cor-wrap { position: relative; display: inline-block; }
.im-cor-amostra {
    display: inline-block; width: 11px; height: 11px; border-radius: 3px;
    margin-right: .25rem; vertical-align: -1px; border: 1px solid rgba(0,0,0,.15);
}
.im-cor-pop {
    position: absolute; z-index: 45; bottom: calc(100% + 6px); left: 0;
    display: flex; gap: .3rem; padding: .4rem;
    background: var(--card); border: 1px solid var(--card-border);
    border-radius: 10px; box-shadow: var(--shadow);
}
.im-cor-op {
    width: 20px; height: 20px; border-radius: 5px; cursor: pointer;
    border: 1px solid rgba(0, 0, 0, .18);
}
.im-cor-op:hover { transform: scale(1.12); }

/* Seletor de emoji do compositor.
   ⚠️ Classe própria, e não `.im-emoji-pop`: aquela é a do picker de REAÇÕES,
   que o JS cria e posiciona à mão (position: fixed) sobre a mensagem. Com o
   mesmo nome, esta regra vencia por vir depois e quebrava as duas — o de
   reações herdava `position: absolute` (com coordenadas de viewport, que erram
   assim que a lista rola) e este ficava sem coordenada nenhuma, caindo abaixo
   do compositor, cortado pela borda da tela.
   `bottom: 100%` sobe acima do compositor, no mesmo padrão da .im-mention-list. */
.im-emoji-pop-comp {
    position: absolute;
    z-index: 45;
    left: .8rem;
    bottom: 100%;
    margin-bottom: .35rem;
    width: min(330px, calc(100vw - 2rem));
    max-height: 280px;
    overflow-y: auto;
    padding: .5rem;
    /* Cores como estavam — fora dos tokens, mas é a aparência já em uso aqui
       (o .im-fmt-pop ao lado segue o mesmo caminho). */
    background: #ffadaf;
    border: 1px solid #ffffff;
    border-radius: 12px;
    box-shadow: var(--shadow);
}
.im-emoji-grupo { margin-bottom: .5rem; }
.im-emoji-titulo {
    font-size: .68rem; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: .05em; margin: .2rem 0 .25rem;
}
.im-emoji-op {
    width: 30px; height: 30px; border: 0; background: none; cursor: pointer;
    font-size: 1.15rem; line-height: 1; border-radius: 6px; padding: 0;
}
.im-emoji-op:hover { background: var(--primary-soft); }
.im-attach-chip {
    display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .5rem;
    padding: .3rem .5rem .3rem .6rem; background: var(--primary-soft); border: 1px solid var(--card-border);
    border-radius: 999px; font-size: .82rem; width: max-content; max-width: 100%;
}
.im-attach-chip .chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.im-attach-chip .chip-x { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.im-attach-chip .chip-x:hover { color: var(--danger); }

.im-member-search-wrap { position: relative; margin-bottom: .6rem; }
.im-member-search-wrap svg { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.im-member-search { width: 100%; padding: .55rem 2.2rem .55rem .7rem; border: 1px solid var(--card-border); border-radius: 10px; background: var(--surface); font-size: .92rem; }
.im-member-search:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); background: var(--card); }
.im-member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .1rem .75rem; max-height: 260px; overflow-y: auto; }
.im-member-grid .check { margin: .25rem 0; }
.im-member-grid .check[hidden] { display: none; }
#im-member-empty { grid-column: 1 / -1; margin: .4rem 0; }

/* API / Tokens */
.token-new { border: 1px solid var(--primary); background: var(--primary-soft); }
.token-value {
    display: block; padding: .6rem .8rem; background: var(--card);
    border: 1px solid var(--card-border); border-radius: 9px;
    font-size: .9rem; word-break: break-all; user-select: all;
}

/* ============================================================
   Chamados (helpdesk)
   ============================================================ */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Pílulas de prioridade / status / genéricas */
.pill {
    display: inline-block; padding: .2rem .55rem; border-radius: 999px;
    font-size: .75rem; font-weight: 600; line-height: 1.4; white-space: nowrap;
}
.pill-muted { background: var(--pill-muted-bg); color: var(--pill-muted-ink); }
.pill-ok { background: #e7f6ec; color: #1a7f42; }
.pill-prio-baixa   { background: #eef2f6; color: #55606e; }
.pill-prio-media   { background: #e7f0ff; color: #1a63d6; }
.pill-prio-alta    { background: #fff1e3; color: #c2670c; }
.pill-prio-urgente { background: #fde7e7; color: #c0322f; }
.pill-status-aberto       { background: #e7f0ff; color: #1a63d6; }
.pill-status-em_andamento { background: #fff6e0; color: #b7791a; }
.pill-status-aguardando   { background: #f1e9fb; color: #7a3fc0; }
.pill-status-resolvido    { background: #e7f6ec; color: #1a7f42; }
.pill-status-fechado      { background: #eef2f6; color: #55606e; }

/* Indicador de SLA (bolinha na fila) */
.sla-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 2px; vertical-align: middle; background: #cbd5e1; }
.sla-ok { background: #22a559; }
.sla-vencendo { background: #e8a72d; }
.sla-estourado { background: #d84343; }
.sla-cumprido { background: #22a559; }
.sla-sem { background: #cbd5e1; }
.sla-alert { color: #c0322f; }

/* Badge de SLA (no detalhe) */
.sla-badge { display: inline-block; padding: .2rem .55rem; border-radius: 8px; font-size: .78rem; font-weight: 600; }
.sla-badge.sla-ok, .sla-badge.sla-cumprido { background: #e7f6ec; color: #1a7f42; }
.sla-badge.sla-vencendo { background: #fff6e0; color: #b7791a; }
.sla-badge.sla-estourado { background: #fde7e7; color: #c0322f; }
.sla-badge.sla-sem { background: #eef2f6; color: #667085; }

/* Detalhe do chamado */
.ch-detail-grid { display: grid; grid-template-columns: 340px 1fr; gap: 1rem; align-items: start; }
.ch-main { display: flex; flex-direction: column; gap: 1rem; order: 2; }
.ch-aside { display: flex; flex-direction: column; gap: 1rem; order: 1; }
.ch-section-title { margin: 0 0 .9rem; font-size: 1.02rem; }
.ch-desc-head { display: flex; justify-content: space-between; margin-bottom: .5rem; }
.ch-desc-author { font-weight: 700; }
.ch-desc-date { color: var(--muted); font-size: .85rem; margin-left: .4rem; }
.ch-desc-body { color: var(--text); line-height: 1.6; }
.ch-anexos { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.ch-anexo { font-size: .82rem; padding: .3rem .6rem; border: 1px solid var(--card-border); border-radius: 8px; text-decoration: none; color: var(--muted); }
.ch-anexo:hover { color: var(--text); background: rgba(16,24,40,.04); }
.ch-protocol { font-size: .95rem; color: var(--muted); }

.ch-field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; }
.ch-field:last-child { margin-bottom: 0; }
.ch-field-label { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.ch-field select { width: 100%; }

/* Timeline */
.ch-timeline { display: flex; flex-direction: column; gap: .9rem; margin-bottom: 1rem; }
.ch-msg { border: 1px solid var(--card-border); border-radius: 10px; padding: .7rem .85rem; background: var(--card); }
.ch-msg.is-internal { background: #fffdf4; border-color: #f0e6c8; }
.ch-msg-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; font-size: .9rem; }
.ch-msg-date { color: var(--muted); font-size: .8rem; margin-left: auto; }
.ch-msg-body { color: var(--text); line-height: 1.55; font-size: .93rem; }
.ch-event { display: flex; align-items: center; gap: .5rem; padding-left: .2rem; font-size: .84rem; color: var(--muted); }
.ch-event-dot { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; flex: none; }
.ch-event-meta { margin-left: auto; font-size: .78rem; }

/* Caixa de resposta */
.ch-reply { border-top: 1px solid var(--card-border); padding-top: 1rem; }
.ch-reply textarea { width: 100%; resize: vertical; }
.ch-reply-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .6rem; flex-wrap: wrap; }
.ch-reply-internal { font-size: .85rem; color: var(--muted); }
.ch-reply-actions { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.ch-reply-feedback { margin: .6rem 0 0; font-size: .85rem; }
.ch-reply-feedback.is-ok { color: #1a7f42; }
.ch-reply-feedback.is-err { color: #c0322f; }

/* Abas por status (fila de chamados) */
.ch-tabs { display: flex; gap: .35rem; margin-top: 1rem; flex-wrap: wrap; }
.ch-tab {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .5rem .9rem; border-radius: 999px; text-decoration: none;
    font-size: .9rem; font-weight: 600; color: var(--muted);
    background: var(--surface); border: 1px solid var(--card-border);
    transition: background .15s, color .15s, border-color .15s;
}
.ch-tab:hover { color: var(--text); border-color: var(--primary); }
.ch-tab.active { color: #fff; background: var(--primary); border-color: var(--primary); }
.ch-tab-badge {
    min-width: 1.4rem; text-align: center; padding: .05rem .4rem; border-radius: 999px;
    font-size: .76rem; font-weight: 700; background: rgba(16,24,40,.08); color: inherit;
}
.ch-tab.active .ch-tab-badge { background: rgba(255,255,255,.25); }

/* Conversa estilo WhatsApp */
.cht-card { display: flex; flex-direction: column; }
.cht-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }

/* Conversa — cartões empilhados (um por mensagem), coloridos por remetente */
.cht-msgs {
    display: flex; flex-direction: column; gap: .7rem;
    background: var(--surface); border: 1px solid var(--card-border); border-radius: 12px;
    padding: 1rem; max-height: 62vh; overflow-y: auto;
}
.cht-msg { display: flex; align-items: flex-start; gap: .6rem; }
.cht-avatar {
    flex: none; width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 700; color: #fff; background: var(--primary);
}
.cht-msg .cht-card {
    flex: 1; min-width: 0; background: var(--card);
    border: 1px solid var(--card-border); border-left: 4px solid var(--primary);
    border-radius: 10px; padding: .65rem .85rem; box-shadow: var(--shadow-sm);
}
.cht-top { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; }
.cht-author { font-size: .85rem; font-weight: 700; color: var(--primary); }
.cht-meta { margin-left: auto; font-size: .74rem; color: var(--muted); white-space: nowrap; }
.cht-body { color: var(--text); font-size: .93rem; line-height: 1.55; word-wrap: break-word; }
.cht-anexos { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }

/* Imagens anexadas — miniatura que abre o visualizador em tela cheia */
.cht-imagens { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .55rem; }
.ch-anexo-img {
    display: block; width: 132px; height: 132px; overflow: hidden;
    border: 1px solid var(--card-border); border-radius: 10px;
    background: rgba(16, 24, 40, .04); cursor: zoom-in;
}
.ch-anexo-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch-anexo-img:hover { border-color: var(--primary); }
@media (max-width: 560px) { .ch-anexo-img { width: 104px; height: 104px; } }

/* Visualizador em tela cheia (lightbox) */
.ch-lb {
    position: fixed; inset: 0; z-index: 1400; display: none;
    align-items: center; justify-content: center;
    background: rgba(12, 8, 8, .92);
}
.ch-lb.is-open { display: flex; }
body.ch-lb-lock { overflow: hidden; }
.ch-lb-img {
    max-width: calc(100vw - 5rem); max-height: calc(100vh - 6rem);
    object-fit: contain; border-radius: 6px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.ch-lb-bar {
    position: absolute; top: 0; left: 0; right: 0;
    display: flex; align-items: center; gap: .6rem;
    padding: .7rem 1rem; background: rgba(0, 0, 0, .45); color: #fff;
}
.ch-lb-nome {
    flex: 1 1 auto; min-width: 0; font-size: .88rem; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ch-lb-cont { flex: 0 0 auto; font-size: .78rem; opacity: .75; }
.ch-lb-btn {
    flex: 0 0 auto; border: 1px solid rgba(255, 255, 255, .35); background: transparent;
    color: #fff; padding: .3rem .7rem; border-radius: 999px; cursor: pointer;
    font-size: .82rem; font-weight: 600; text-decoration: none; line-height: 1.5;
}
.ch-lb-btn:hover { background: rgba(255, 255, 255, .16); }
.ch-lb-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 66px; border: 0; border-radius: 8px; cursor: pointer;
    background: rgba(255, 255, 255, .12); color: #fff; font-size: 2rem; line-height: 1;
}
.ch-lb-nav:hover { background: rgba(255, 255, 255, .26); }
.ch-lb-prev { left: .6rem; }
.ch-lb-next { right: .6rem; }
@media (max-width: 560px) {
    .ch-lb-img { max-width: calc(100vw - 1rem); }
    .ch-lb-nav { width: 36px; height: 54px; font-size: 1.5rem; }
}
.cht-tag {
    font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    color: #8a6d1a; background: #f3e6b3; padding: .06rem .4rem; border-radius: 6px;
}

/* Solicitante (entrada) — vermelho da marca */
.cht-in .cht-avatar { background: var(--primary); }
.cht-in .cht-card { border-left-color: var(--primary); }
.cht-in .cht-author { color: var(--primary); }

/* Equipe (saída) — verde. Cores por token: ver o `:root` e o bloco escuro. */
.cht-out .cht-avatar { background: var(--chat-out-avatar); }
.cht-out .cht-card { background: var(--chat-out-bg); border-left-color: var(--chat-out-line); }
.cht-out .cht-author { color: var(--chat-out-name); }

/* Nota interna — âmbar */
.cht-note .cht-avatar { background: var(--chat-note-avatar); }
.cht-note .cht-card { background: var(--chat-note-bg); border-left-color: var(--chat-note-line); }
.cht-note .cht-author { color: var(--chat-note-name); }

/* Composer (barra de resposta) */
.cht-composer { border-top: 1px solid var(--card-border); padding-top: .9rem; margin-top: .9rem; }
.cht-textarea {
    width: 100%; resize: vertical; display: block;
    min-height: 160px; max-height: 60vh; padding: .85rem 1rem;
    font-family: inherit; font-size: .95rem; line-height: 1.6; color: var(--text);
    background: var(--surface); border: 1px solid var(--card-border); border-radius: 12px;
    box-shadow: var(--shadow-sm) inset; transition: border-color .15s, box-shadow .15s, background .15s;
    overflow-y: auto;
}
.cht-textarea::placeholder { color: var(--muted); opacity: .8; }
.cht-textarea:focus {
    outline: none; background: var(--card);
    border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring);
}
.cht-tools { display: flex; justify-content: flex-end; margin-bottom: .5rem; }
.cht-magic {
    display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
    padding: .35rem .75rem; border-radius: 999px; font-size: .82rem; font-weight: 600;
    color: var(--primary); background: var(--primary-soft); border: 1px solid transparent;
    transition: background .15s, border-color .15s, opacity .15s;
}
.cht-magic:hover { border-color: var(--primary); }
.cht-magic:disabled { cursor: default; opacity: .7; }
.cht-magic-ico { font-size: .95rem; line-height: 1; }
.cht-magic.is-loading .cht-magic-ico { animation: cht-pulse 1s ease-in-out infinite; }
@keyframes cht-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.cht-composer-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .55rem; flex-wrap: wrap; }
.cht-internal { font-size: .85rem; color: var(--muted); }
.cht-composer-actions { display: flex; align-items: center; gap: .6rem; margin-left: auto; }

/* ---------- Assinatura de e-mails e mensagens (Perfil → Assinatura) ----------
 * `.cht-ass*` é o desenho da assinatura DENTRO da mensagem — sai do
 * `Assinatura::htmlDe()` (PHP) e da prévia do `assinatura.js`, com as mesmas
 * classes. `.ass-*` é o bloco de escolha nos formulários e a aba do perfil. */
.cht-ass {
    margin-top: .6rem; padding-top: .55rem; border-top: 1px dashed var(--card-border);
    font-size: .84rem; line-height: 1.5; color: var(--text);
}
.cht-ass-txt { overflow-wrap: break-word; }
.cht-ass-img { display: block; width: auto; height: auto; max-width: min(440px, 100%); max-height: 300px; }
.cht-ass-acima .cht-ass-img { margin-bottom: .45rem; }
.cht-ass-abaixo .cht-ass-img { margin-top: .45rem; }
.cht-ass-lado { display: flex; align-items: center; gap: .75rem; }
.cht-ass-lado .cht-ass-img { flex: none; max-width: 140px; max-height: 90px; }
.cht-ass-lado .cht-ass-txt { min-width: 0; }
@media (max-width: 480px) {
    .cht-ass-lado { flex-direction: column; align-items: flex-start; gap: .45rem; }
}
/* Logo escura com fundo transparente sumiria no cartão escuro: no modo
   escuro a imagem ganha um fundo claro próprio. */
body.tema-escuro .cht-ass-img { background: #fff; padding: 4px; border-radius: 6px; }

.ass-comp {
    margin-top: .6rem; padding: .55rem .75rem;
    background: var(--surface); border: 1px solid var(--card-border); border-radius: 10px;
}
.ass-comp .ass-comp-usar { margin: 0; font-size: .86rem; }
.ass-comp-corpo { margin-top: .45rem; }
.ass-comp.is-off .ass-comp-corpo { display: none; }
.ass-comp-previa .cht-ass { margin-top: 0; padding-top: 0; border-top: 0; }
.ass-comp-edicao { margin-top: .55rem; }
.ass-comp-edicao > summary {
    cursor: pointer; width: max-content; font-size: .82rem; font-weight: 600; color: var(--primary);
}
.ass-comp-edicao[open] > summary { margin-bottom: .5rem; }
.ass-comp-dica { margin: .5rem 0 0; font-size: .8rem; color: var(--muted); }
/* Sem regra global para <a>, o link sairia no azul padrão do navegador. */
.ass-comp-dica a, .ass-comp-edicao .hint a { color: var(--primary); font-weight: 600; }
.ass-rot { display: block; margin-bottom: .4rem; font-size: .82rem; font-weight: 600; color: var(--muted); }
.ass-check { margin: .2rem 0 .35rem; }
.ass-texto {
    display: block; width: 100%; resize: vertical; padding: .65rem .8rem;
    font-family: inherit; font-size: .92rem; line-height: 1.5; color: var(--text);
    background: var(--surface); border: 1px solid var(--control-border); border-radius: 10px; outline: none;
}
.ass-comp .ass-texto { background: var(--card); margin-bottom: .35rem; }
.ass-texto:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }

.ass-perfil {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem; align-items: start;
}
@media (max-width: 860px) { .ass-perfil { grid-template-columns: 1fr; } }
.ass-bloco { margin-bottom: 1.1rem; }
.ass-img-linha { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: .2rem; }
.ass-previa-msg {
    padding: .9rem 1rem; background: var(--surface);
    border: 1px solid var(--card-border); border-radius: 12px;
}
.ass-previa-msg [data-ass-vazia] { margin-top: .6rem; }
.cht-attach {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.3rem; height: 2.3rem; border-radius: 8px; cursor: pointer; font-size: 1.1rem;
    border: 1px solid var(--card-border); background: var(--surface);
}
.cht-attach:hover { border-color: var(--primary); }

/* Modal de acompanhamento */
.ch-log { display: flex; flex-direction: column; gap: .8rem; }

/* Dashboard de chamados */
.ch-dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.ch-bars { display: flex; flex-direction: column; gap: .7rem; }
.ch-bar-row { display: grid; grid-template-columns: 130px 1fr 40px; align-items: center; gap: .6rem; }
.ch-bar-label { font-size: .85rem; color: var(--muted); }
.ch-bar-track { background: rgba(16,24,40,.06); border-radius: 999px; height: 12px; overflow: hidden; }
.ch-bar-fill { display: block; height: 100%; border-radius: 999px; background: #1a63d6; transition: width .4s; }
.ch-bar-value { font-size: .85rem; font-weight: 600; text-align: right; }
.ch-bar-baixa { background: #9aa5b1; }
.ch-bar-media { background: #1a63d6; }
.ch-bar-alta { background: #e8892d; }
.ch-bar-urgente { background: #d84343; }
.ch-bar-dept { background: #993635; }

@media (max-width: 900px) {
    .ch-detail-grid { grid-template-columns: 1fr; }
    .ch-main { order: 1; }
    .ch-aside { order: 2; }
    .ch-dash-cols { grid-template-columns: 1fr; }
}

/* ============================================================
   Painel de TV (mural) — padrão de cores do sistema (vinho #993635)
   ============================================================ */
.tv {
    position: fixed;           /* ignora o padding/centralização do body */
    inset: 0;
    overflow-y: auto;
    background: #f1ecec;
    color: #2b1f1f;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.tv-head {
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
    padding: 1rem 1.8rem;
    background: linear-gradient(135deg, #993635 0%, #7d2b2a 100%);
    color: #fff;
    box-shadow: 0 2px 14px rgba(123, 43, 42, .28);
}
.tv-title { display: flex; align-items: center; gap: .9rem; font-size: 1.6rem; font-weight: 800; letter-spacing: .01em; }
.tv-logo-chip { display: inline-flex; align-items: center; background: #fff; padding: .35rem .55rem; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.tv-logo { height: 34px; width: auto; display: block; }
.tv-kpis { display: flex; align-items: center; gap: 1.6rem; }
.tv-kpi { display: flex; flex-direction: column; align-items: center; min-width: 74px; }
.tv-kpi-value { font-size: 1.9rem; font-weight: 800; line-height: 1; }
.tv-kpi-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.82); margin-top: .25rem; }
.tv-kpi-alert .tv-kpi-value { color: #ffd45e; }
.tv-clock { font-size: 1.9rem; font-weight: 800; font-variant-numeric: tabular-nums; padding-left: 1rem; border-left: 1px solid rgba(255,255,255,.25); }
.tv-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; padding: 1.4rem 1.8rem 2rem; }
.tv-col {
    background: var(--card); border: 1px solid #ece3e3; border-radius: 16px; overflow: hidden;
    display: flex; flex-direction: column; box-shadow: 0 6px 22px rgba(153, 54, 53, .07);
}
.tv-col-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: .85rem 1.1rem; font-weight: 800; font-size: 1.12rem; color: #2b1f1f;
    background: #faf7f7; border-bottom: 3px solid #993635;
}
.tv-col-count { min-width: 30px; text-align: center; background: #f6e7e7; color: #993635; border-radius: 999px; padding: .12rem .6rem; font-size: .88rem; font-weight: 700; }
.tv-col-aberto .tv-col-head       { border-bottom-color: #1a63d6; }
.tv-col-aberto .tv-col-count      { background: #e7f0ff; color: #1a63d6; }
.tv-col-em_andamento .tv-col-head { border-bottom-color: #c2670c; }
.tv-col-em_andamento .tv-col-count{ background: #fff1e3; color: #c2670c; }
.tv-col-aguardando .tv-col-head   { border-bottom-color: #7a3fc0; }
.tv-col-aguardando .tv-col-count  { background: #f1e9fb; color: #7a3fc0; }
.tv-col-body { padding: .9rem; display: flex; flex-direction: column; gap: .8rem; overflow-y: auto; max-height: calc(100vh - 200px); }
.tv-card {
    background: var(--card); border: 1px solid #eadfdf; border-left: 5px solid #22a559; border-radius: 12px;
    padding: .75rem .9rem; box-shadow: 0 1px 3px rgba(0,0,0,.05); transition: transform .15s;
}
.tv-card.is-vencendo { border-left-color: #e8a72d; }
.tv-card.is-estourado { border-left-color: #d84343; background: #fff6f6; box-shadow: 0 0 0 1px rgba(216,67,67,.18); }
.tv-card-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; }
.tv-proto { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; color: #9a8a8a; }
.tv-card-subject { font-weight: 700; font-size: 1.02rem; line-height: 1.3; color: #2b1f1f; }
.tv-card-meta { font-size: .83rem; color: #8a7374; margin-top: .35rem; }
.tv-empty, .tv-loading { color: #b6a6a6; font-size: .9rem; text-align: center; padding: 1.2rem; }
@media (max-width: 900px) {
    .tv-board { grid-template-columns: 1fr; }
    .tv-head { flex-wrap: wrap; }
    .tv-kpis { gap: 1.1rem; }
}

/* ============================================================
   Consultoria — Kanban de projetos
   ============================================================ */
.ck-alarm {
    display: inline-flex; align-items: center; gap: .3rem;
    background: #fde7e7; color: #c0322f; font-weight: 700; font-size: .82rem;
    padding: .35rem .7rem; border-radius: 999px;
}
.sla-badge.sla-atrasado { background: #fde7e7; color: #c0322f; }
.sla-badge.sla-concluido { background: #eef2f6; color: #55606e; }

/* Lista de funis (Planejamento) */
.funil-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-top: 1rem; }
.funil-card { border: 1px solid var(--card-border); border-radius: 14px; background: var(--card); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .7rem; box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .15s, border-color .15s; }
.funil-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--primary); }
.funil-open { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: .3rem; }
.funil-name { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.funil-stats { display: flex; gap: .4rem; font-size: .82rem; color: var(--muted); }
.funil-actions { display: flex; gap: .5rem; }

/* Abas de funil (Planejamento) */
.ck-funis { display: flex; gap: .4rem; flex-wrap: wrap; margin: 1rem 0 .2rem; border-bottom: 1px solid var(--card-border); padding-bottom: .2rem; }
.ck-funil-tab {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .5rem .9rem; border-radius: 10px 10px 0 0;
    text-decoration: none; color: var(--muted); font-weight: 600; font-size: .92rem;
    border: 1px solid transparent; border-bottom: none;
}
.ck-funil-tab:hover { background: rgba(16, 24, 40, .04); color: var(--text); }
.ck-funil-tab.active { color: var(--primary); background: var(--card); border-color: var(--card-border); box-shadow: 0 -1px 0 var(--primary) inset; }
.ck-funil-count { background: rgba(16, 24, 40, .08); color: var(--muted); border-radius: 999px; padding: .02rem .5rem; font-size: .78rem; }
.ck-funil-tab.active .ck-funil-count { background: var(--primary-soft); color: var(--primary); }

.ck-board { display: flex; gap: 1rem; overflow-x: auto; padding: .25rem .25rem 1rem; align-items: flex-start; }
.ck-col {
    flex: 0 0 300px; width: 300px;
    background: var(--kb-col-bg); border: 1px solid var(--card-border); border-radius: 14px;
    display: flex; flex-direction: column; max-height: calc(100vh - 210px);
}
.ck-col-head { display: flex; align-items: center; justify-content: space-between; padding: .75rem .9rem; font-weight: 700; }
.ck-col-name { display: inline-flex; align-items: center; gap: .5rem; font-size: .98rem; }
.ck-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.ck-dot-lg { width: 16px; height: 16px; }
.ck-col-count { background: var(--kb-count-bg); color: var(--kb-count-ink); border-radius: 999px; padding: .05rem .55rem; font-size: .8rem; }
.ck-col-body { padding: .7rem; display: flex; flex-direction: column; gap: .7rem; overflow-y: auto; min-height: 50px; }

.ck-card {
    background: var(--card); border: 1px solid var(--kb-card-border); border-left: 4px solid var(--kb-card-accent); border-radius: 10px;
    padding: .7rem .8rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); cursor: grab;
}
.ck-card:active { cursor: grabbing; }
.ck-card.is-dragging { opacity: .5; }
.ck-card.sla-ok { border-left-color: #22a559; }
.ck-card.sla-vencendo { border-left-color: #e8a72d; }
.ck-card.sla-atrasado { border-left-color: #d84343; background: var(--kb-card-late-bg); }
.ck-card.sla-concluido { border-left-color: #9aa5b1; opacity: .82; }
.ck-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .35rem; }
.ck-card-alarm { font-size: .95rem; }
.ck-card-title { display: block; font-weight: 700; color: var(--text); text-decoration: none; line-height: 1.3; }
.ck-card-title:hover { color: var(--primary); }
.ck-card-client { font-size: .82rem; color: var(--muted); margin-top: .15rem; }
.ck-card-meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.ck-tasks-count, .ck-tasks { font-size: .8rem; color: var(--muted); }
.ck-card-owner { font-size: .8rem; color: var(--muted); margin-top: .4rem; }

/* Tarefas (detalhe do projeto) */
.ck-tasks { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.ck-task { display: flex; align-items: flex-start; gap: .6rem; border: 1px solid var(--card-border); border-radius: 9px; padding: .55rem .7rem; }
.ck-task.is-done { opacity: .6; }
.ck-task.is-done .ck-task-title { text-decoration: line-through; }
.ck-task-check { padding-top: .1rem; }
.ck-task-body { flex: 1; display: flex; flex-direction: column; gap: .2rem; }
.ck-task-title { font-weight: 600; font-size: .92rem; }
.ck-task-meta { display: flex; gap: .6rem; font-size: .8rem; color: var(--muted); flex-wrap: wrap; }
.ck-task-due.is-over { color: var(--danger); font-weight: 600; }
.ck-task-del { background: none; border: none; color: var(--danger); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 .2rem; }
.ck-taskform { border-top: 1px solid var(--card-border); padding-top: .9rem; }
.ck-taskform-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.ck-taskform-row input[type="text"] { flex: 1; min-width: 160px; }

/* Etapas (config) */
.ck-etapas { display: flex; flex-direction: column; gap: .6rem; }
.ck-etapa-row { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; border-radius: 10px; }
.ck-etapa-row.is-dragging { opacity: .5; }
.ck-drag { cursor: grab; color: var(--muted); font-size: 1.2rem; line-height: 1; user-select: none; padding: 0 .1rem; }
.ck-drag:active { cursor: grabbing; }
.ck-etapa-form { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; flex: 1; }
.ck-etapa-form input[type="text"] { min-width: 180px; }

@media (max-width: 560px) {
    .ck-col { flex-basis: 84vw; width: 84vw; }
}

/* Confetes + mensagem de comemoração */
.nn-confetti-canvas { position: fixed; inset: 0; z-index: 1200; pointer-events: none; }
.nn-confetti-msg {
    position: fixed; left: 50%; top: 30%; transform: translate(-50%, -50%);
    z-index: 401; cursor: pointer;
    background: var(--card); color: #2b1f1f; border-radius: 16px;
    padding: 1.1rem 1.6rem; max-width: 90vw; text-align: center;
    font-size: 1.15rem; font-weight: 700; line-height: 1.4;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3); border: 1px solid #ece3e3;
    animation: nn-pop .35s cubic-bezier(.18, .89, .32, 1.28);
}
.nn-confetti-msg.nn-out { animation: nn-fade .4s forwards; }
@keyframes nn-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(.7); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes nn-fade { to { opacity: 0; transform: translate(-50%, -60%) scale(.95); } }
@media (prefers-reduced-motion: reduce) { .nn-confetti-msg { animation: none; } }

/* ============================================================
   Política / Contrato de adesão (documento)
   ============================================================ */
/* Container do documento (funciona no layout com menu e no do primeiro acesso) */
.doc-wrap { width: 100%; max-width: 900px; margin: 0 auto; }
.doc-card { max-width: 900px; padding: 2rem 2.2rem; }
.doc {
    color: var(--text);
    font-size: .95rem;
    line-height: 1.75;
    max-height: 62vh;
    overflow-y: auto;
    padding-right: .8rem;
    text-align: justify;
}
.doc::-webkit-scrollbar { width: 10px; }
.doc::-webkit-scrollbar-thumb { background: rgba(16, 24, 40, .18); border-radius: 999px; }
.doc-accept { max-width: 900px; }
.doc-cpf { max-width: 260px; margin-bottom: 1.1rem; }

.btn-icon { padding: .3rem .5rem; line-height: 1; font-size: 1rem; }

/* ============================================================
   Pop-up de entrada (MKT)
   ============================================================ */
.promo-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 1.2rem; }
.promo-backdrop { position: absolute; inset: 0; background: rgba(16, 24, 40, .55); backdrop-filter: blur(2px); }
.promo-box {
    position: relative; z-index: 1;
    width: 70%; max-height: 88vh; overflow-y: auto;
    background: var(--card); border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
    padding: 1.6rem 1.7rem;
    animation: promo-in .2s ease-out;
}
@keyframes promo-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.promo-x {
    position: absolute; top: .7rem; right: .8rem;
    background: rgba(16, 24, 40, .06); border: none; color: var(--muted);
    width: 30px; height: 30px; border-radius: 50%; font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.promo-x:hover { background: rgba(16, 24, 40, .12); color: var(--text); }
.promo-title { margin: 0 0 .9rem; font-size: 1.3rem; color: var(--text); padding-right: 1.5rem; }
.promo-img { display: block; width: 100%; height: auto; border-radius: 12px; margin-bottom: 1rem; }
.promo-html { color: var(--text); line-height: 1.6; }
.promo-html img { max-width: 100%; height: auto; border-radius: 8px; }
.promo-html h1, .promo-html h2, .promo-html h3 { margin: .2rem 0 .5rem; }
.promo-html p { margin: 0 0 .7rem; }
.promo-html a { color: var(--primary); }
.promo-html ul, .promo-html ol { margin: 0 0 .7rem; padding-left: 1.3rem; }
@media (max-width: 560px) { .promo-box { padding: 1.2rem; } }

/* Auditoria — pendentes do contrato */
.pend-summary { cursor: pointer; font-size: .95rem; }
.pend-summary .pill { margin-left: .3rem; }
.pend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .6rem; margin-top: 1rem; }
.pend-item { border: 1px solid var(--card-border); border-left: 3px solid var(--danger); border-radius: 9px; padding: .55rem .7rem; }
.pend-name { font-weight: 600; font-size: .9rem; }
.pend-meta { font-size: .8rem; color: var(--muted); }
.doc-accept-check { align-items: flex-start; gap: .6rem; font-size: .95rem; line-height: 1.6; }
.doc-accept-hint { margin: .7rem 0 1rem; }
@media (max-width: 640px) {
    .doc-card { padding: 1.3rem 1.2rem; }
    .doc { max-height: none; text-align: left; }
}

/* ============================================================
   Relatórios — Dashboard (gráficos SVG)
   ============================================================ */
.rp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
/* Item de grid nasce com `min-width: auto`: uma tabela de 5 colunas dentro do card
   alargava a coluna inteira e desalinhava as duas metades. Com 0, a tabela rola
   dentro do `.table-wrap` (overflow-x) e o grid fica 1fr 1fr de verdade. */
.rp-grid > * { min-width: 0; }
.rp-card { padding: 1.2rem 1.3rem; }
.rp-title { margin: 0 0 1rem; font-size: 1.02rem; font-weight: 700; color: var(--text); }
.rp-sub { color: var(--muted); font-size: .78rem; margin-top: .2rem; }

/* Rosca (pizza) + legenda */
.rp-chart { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.rp-donut { flex: none; }
/* ⚠️⚠️ `fill` por TOKEN, nunca hex fixo. Estes três textos ficam DENTRO do
   cartao, entao seguem o tema -- e o hex que estava aqui nao seguia:
   `#0b0b0b` (quase preto) sobre o `--card` do modo escuro media **1,15:1**, e
   o numero central do donut ficava invisivel em TODA tela que usa grafico
   (RH, Relatorio CRM, Negativacao, Financeiro, AVOX). Medido, nao estimado. */
.rp-donut-top { font-size: 20px; font-weight: 800; fill: var(--text); }
.rp-donut-sub { font-size: 11px; fill: var(--ch-axis); }
.rp-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: .5rem; }
.rp-legend li { display: flex; align-items: center; gap: .55rem; font-size: .88rem; }
.rp-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.rp-legend-label { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-legend-val { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Série temporal */
.rp-area { display: block; max-width: 100%; }
/* ⚠️ `--ch-axis` e separado do `--muted` de proposito: o rotulo do eixo tem
   10,5px, e o `--muted` do modo claro mede **4,47:1** sobre o cartao --
   reprova AA por pouco, justamente no texto menor da tela. Mexer no `--muted`
   geral mudaria toda `.hint` do projeto, que nao foi pedido. */
.rp-axis { font-size: 10.5px; fill: var(--ch-axis); }
.rp-point-label { font-size: 11px; font-weight: 700; fill: #52514e; }

/* Barras horizontais */
.rp-bars { display: flex; flex-direction: column; gap: .7rem; }
.rp-bar-row { display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: .7rem; }
.rp-bar-label { font-size: .85rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-bar-track { background: rgba(16, 24, 40, .06); border-radius: 4px; height: 14px; overflow: hidden; }
.rp-bar-fill { display: block; height: 100%; background: #2a78d6; border-radius: 0 4px 4px 0; transition: width .4s; }
.rp-bar-val { font-size: .84rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Tabela de dados (acessibilidade) */
.rp-data { margin-top: 1rem; }
.rp-data summary { cursor: pointer; font-size: .82rem; color: var(--muted); }
.rp-data summary:hover { color: var(--text); }
.rp-table { margin-top: .6rem; font-size: .85rem; }
.rp-table th, .rp-table td { padding: .4rem .6rem; }

@media (max-width: 900px) {
    .rp-grid { grid-template-columns: 1fr; }
    .rp-bar-row { grid-template-columns: 110px 1fr auto; }
}

/* ---------- Dashboard CRM: cada quadro com o seu filtro (relatorio-crm.js) ----------
 * Uma grade só para os sete quadros: esconder um não pode deixar buraco, e o
 * `dense` puxa o quadro de meia largura seguinte para o lugar vago.
 * ⚠️ Barras e pontos de legenda são SVG com `fill` em atributo (a partial é
 * servida por AJAX e não pode usar InlineCss) — por isso `.rc-bar-primary`
 * pinta com a cor da marca por CSS, e as demais cores vêm no próprio SVG. */
.rc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 1rem; }
.rc-grid > .rc-largo,
.rc-grid > .rc-sozinho { grid-column: 1 / -1; }
/* A legenda desce para baixo da rosca antes de truncar o nome de quem ela descreve. */
.rc-q .rp-legend { min-width: 260px; }
.rc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.rc-head .rp-title { margin: 0; }
.rc-head-tit { min-width: 0; }
.rc-resumo { margin: .25rem 0 0; font-size: .78rem; line-height: 1.35; color: var(--muted); }
.rc-q-ind .rc-head { margin-bottom: .7rem; }
/* O botão do filtro é discreto até ser preciso: cinza, sem moldura; ganha
   moldura no foco/hover e a cor da marca quando há filtro ativo. */
.rc-filtro-btn {
    flex: none; display: inline-flex; align-items: center; gap: .3rem;
    padding: .32rem .42rem; border: 1px solid transparent; border-radius: 8px;
    background: transparent; color: var(--muted); font: inherit; font-size: .74rem; font-weight: 700; line-height: 1;
    cursor: pointer; transition: color .15s, background .15s, border-color .15s;
}
.rc-filtro-btn:hover, .rc-filtro-btn:focus-visible { color: var(--text); background: var(--surface); border-color: var(--control-border); }
.rc-filtro-btn:focus-visible, .rc-personalizar:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.rc-filtro-btn.is-ativo { color: var(--primary); border-color: var(--control-border); }
/* ⚠️ Tinta = `--card`: branco sobre a marca no claro e escuro sobre a marca
   CLAREADA no modo escuro — branco ali mede 3,53:1 e reprova. */
.rc-filtro-n {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.1rem; height: 1.1rem; padding: 0 .3rem; border-radius: 999px;
    background: var(--primary); color: var(--card); font-size: .68rem; font-variant-numeric: tabular-nums;
}
.rc-bar { display: block; }
.rc-bar-primary { fill: var(--primary); }
.rc-dot { display: block; flex: none; }
.rc-q.is-carregando { opacity: .5; pointer-events: none; transition: opacity .15s; }
.rc-erro { margin: 0; }
.rc-nenhum { margin: 0 0 1rem; }
.rc-personalizar {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .45rem .8rem; border: 1px solid var(--control-border); border-radius: 10px;
    background: transparent; color: var(--muted); font: inherit; font-size: .85rem; font-weight: 600;
    cursor: pointer; transition: color .15s, background .15s;
}
.rc-personalizar:hover, .rc-personalizar:focus-visible { color: var(--text); background: var(--card); }
.rc-modal-sub { margin: .2rem 0 0; font-size: .85rem; color: var(--muted); }
.rc-modal-nota { margin: .9rem 0 0; }
.rc-modal-erro { margin: .75rem 0 0; font-size: .85rem; font-weight: 600; color: var(--alert-error-ink); }
.modal-actions .rc-limpar { margin-right: auto; }
.rc-quadros-lista { grid-template-columns: 1fr; }
@media (prefers-reduced-motion: reduce) {
    .rc-q.is-carregando, .rc-filtro-btn, .rc-personalizar { transition: none; }
}
@media (max-width: 900px) {
    .rc-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ===================== WhatsApp — inbox de atendimento ===================== */
.wa { display: grid; grid-template-columns: 320px 1fr; gap: 0; height: calc(100vh - 210px); min-height: 420px;
    background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); overflow: hidden; }
.wa-side { border-right: 1px solid var(--card-border); display: flex; flex-direction: column; min-width: 0; }
.wa-side-head { display: flex; gap: .4rem; padding: .6rem; border-bottom: 1px solid var(--card-border); }
.wa-search { flex: 1 1 auto; min-width: 0; padding: .45rem .6rem; border: 1px solid var(--card-border); border-radius: 8px; }
.wa-filter { flex: 0 0 auto; }
.wa-convs { flex: 1 1 auto; overflow-y: auto; }
.wa-side-empty { padding: 1.2rem; color: var(--muted); text-align: center; font-size: .9rem; }
.wa-conv { position: relative; display: flex; gap: .6rem; align-items: center; width: 100%; text-align: left;
    padding: .55rem .7rem; border: none; background: none; border-bottom: 1px solid var(--card-border); cursor: pointer; }
.wa-conv:hover { background: var(--surface); }
.wa-conv.active { background: var(--primary-soft); }
.wa-avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    color: #fff; font-weight: 600; background: linear-gradient(135deg, #128c3f, #25d366); }
.wa-conv-body { flex: 1 1 auto; min-width: 0; }
.wa-conv-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.wa-conv-name { font-weight: 600; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-conv-preview { display: block; color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-badge { flex: 0 0 auto; background: #25d366; color: #063; font-size: .7rem; font-weight: 700; border-radius: 999px; padding: .05rem .4rem; }
.wa-conv-tag { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.wa-tag-aberto { background: #f59e0b; } .wa-tag-em_andamento { background: #2563eb; } .wa-tag-resolvido { background: #15803d; }
/* Chat */
.wa-chat { display: flex; flex-direction: column; min-width: 0; }
.wa-chat-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .6rem .9rem; border-bottom: 1px solid var(--card-border); }
.wa-chat-name { font-weight: 700; display: block; }
.wa-chat-sub { color: var(--muted); font-size: .82rem; }
.wa-chat-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.wa-messages { flex: 1 1 auto; overflow-y: auto; padding: 1rem; background: var(--wa-canvas); display: flex; flex-direction: column; gap: .4rem; }
.wa-loading { color: var(--muted); text-align: center; padding: 1rem; }
.wa-msg { display: flex; }
.wa-msg-in { justify-content: flex-start; }
.wa-msg-out { justify-content: flex-end; }
.wa-bubble { max-width: 75%; padding: .45rem .6rem; border-radius: 10px; font-size: .92rem; line-height: 1.4;
    box-shadow: 0 1px 1px rgba(0,0,0,.08); word-wrap: break-word; }
.wa-msg-in .wa-bubble { background: var(--card); border-top-left-radius: 2px; }
.wa-msg-out .wa-bubble { background: var(--wa-out-bg); border-top-right-radius: 2px; }
.wa-msg-text { display: block; }
.wa-media-img { max-width: 220px; max-height: 220px; border-radius: 8px; display: block; margin-bottom: .2rem; }
.wa-media-doc { display: inline-block; margin-bottom: .2rem; color: var(--primary); }
.wa-msg-meta { display: block; text-align: right; color: var(--wa-meta); font-size: .68rem; margin-top: .15rem; }
.wa-msg-status.wa-read { color: #53bdeb; } .wa-msg-status.wa-failed { color: #b91c1c; }
/* Composer */
.wa-composer { border-top: 1px solid var(--card-border); padding: .5rem .7rem; background: var(--card); }
.wa-window-warn { background: rgba(245,158,11,.14); color: #92600b; border-radius: 8px; padding: .4rem .6rem; font-size: .82rem; margin-bottom: .4rem; }
.wa-composer-row { display: flex; align-items: flex-end; gap: .5rem; }
.wa-attach { flex: 0 0 auto; cursor: pointer; font-size: 1.25rem; padding: .3rem; }
.wa-composer textarea { flex: 1 1 auto; resize: none; padding: .55rem .7rem; border: 1px solid var(--card-border); border-radius: 18px; font-family: inherit; font-size: .95rem; max-height: 120px; }
.wa-send { flex: 0 0 auto; width: auto; }
.wa-attach-chip { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; font-size: .82rem; color: var(--muted); }
.wa-attach-chip .chip-x { background: none; border: none; cursor: pointer; font-size: 1.1rem; color: var(--muted); }
.wa-empty { grid-column: 2; display: grid; place-items: center; color: var(--muted); }
@media (max-width: 780px) {
    .wa { grid-template-columns: 1fr; height: auto; }
    .wa-side { max-height: 40vh; }
    .wa-empty { display: none; }
}
.wa-bot-toggle { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 600; color: var(--wa-out-name); cursor: pointer; padding: .2rem .5rem; border: 1px solid var(--card-border); border-radius: 999px; }
.wa-msg-sender { font-weight: 600; margin-right: .35rem; opacity: .8; }
.wa-msg-out .wa-msg-sender { color: var(--wa-out-name); }
/* Jurídico → WhatsApp → Conversas da Aninha: a transcrição reusa os balões acima. */
.jw-conversa .wa-messages { border-radius: var(--radius); }
.jw-dia { align-self: center; margin: .4rem 0; padding: .1rem .65rem; border: 1px solid var(--card-border); border-radius: 999px;
    background: var(--card); color: var(--muted); font-size: .72rem; }
.jw-tipo { font-style: italic; color: var(--wa-meta); }

/* ===================== Planejamento — modal do card (estilo Trello) ===================== */
body.tc-modal-open { overflow: hidden; }
.tc-modal { display: none; position: fixed; inset: 0; z-index: 200; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; }
.tc-modal.is-open { display: flex; }
.tc-modal-backdrop { position: fixed; inset: 0; background: rgba(16, 24, 40, .55); }
.tc-modal-box { position: relative; width: 100%; max-width: 840px; background: var(--tc-bg); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.3); overflow: hidden; animation: modal-in .16s ease-out; }
.tc-loading, .tc-error { padding: 2rem; text-align: center; color: var(--muted); }
.tc-head { display: flex; align-items: center; justify-content: space-between; padding: .7rem 1rem; }
.tc-etapa-badge { background: var(--tc-chip); color: var(--tc-ink-soft); font-size: .8rem; font-weight: 600; padding: .2rem .6rem; border-radius: 6px; }
.tc-head-actions { display: flex; gap: .3rem; }
.tc-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: none; border-radius: 8px; cursor: pointer; color: var(--tc-ink-soft); font-size: 1.2rem; text-decoration: none; }
.tc-icon-btn:hover { background: rgba(16,24,40,.08); }
.tc-body { display: grid; grid-template-columns: 1fr 240px; gap: 1rem; padding: 0 1.2rem 1.4rem; }
.tc-main { min-width: 0; }
.tc-title-row { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: 1rem; }
.tc-title-ic { color: var(--tc-ink-muted); font-size: 1.2rem; margin-top: .3rem; }
.tc-title { flex: 1 1 auto; border: 1px solid transparent; background: transparent; font-size: 1.35rem; font-weight: 700; color: var(--tc-ink); resize: none; padding: .2rem .4rem; border-radius: 6px; font-family: inherit; line-height: 1.3; overflow: hidden; }
.tc-title:focus { background: var(--card); border-color: var(--primary); outline: none; }
.tc-block { margin-bottom: 1.3rem; }
.tc-block-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.tc-block-ic { color: var(--tc-ink-muted); }
.tc-block-head h3 { margin: 0; font-size: 1rem; color: var(--tc-ink); }
.tc-progress-num { margin-left: auto; font-size: .8rem; color: var(--muted); }
.tc-desc { width: 100%; border: 1px solid var(--card-border); background: var(--card); border-radius: 8px; padding: .6rem .7rem; font-family: inherit; font-size: .95rem; resize: none; overflow: hidden; min-height: 46px; }
.tc-desc:focus { outline: none; border-color: var(--primary); }
/* checklist */
.tc-progress { height: 8px; background: var(--tc-chip); border-radius: 999px; overflow: hidden; margin-bottom: .6rem; }
.tc-progress-bar { height: 100%; background: var(--tc-progress); transition: width .2s; }
.tc-tasks { display: flex; flex-direction: column; gap: .15rem; }
.tc-task { display: flex; align-items: center; gap: .55rem; padding: .35rem .4rem; border-radius: 8px; }
.tc-task:hover { background: rgba(16,24,40,.04); }
.tc-check input { width: 16px; height: 16px; }
.tc-task-title { flex: 1 1 auto; min-width: 0; font-size: .92rem; color: var(--tc-ink); }
.tc-task.is-done .tc-task-title { text-decoration: line-through; color: var(--muted); }
.tc-task-meta { display: flex; gap: .4rem; align-items: center; font-size: .76rem; color: var(--muted); }
.tc-task-due.is-over { color: var(--tc-danger); font-weight: 600; }
.tc-task-del { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 1.1rem; opacity: 0; }
.tc-task:hover .tc-task-del { opacity: 1; }
.tc-taskadd { display: flex; gap: .4rem; margin-top: .5rem; }
.tc-taskadd input { flex: 1 1 auto; padding: .45rem .6rem; border: 1px solid var(--card-border); border-radius: 8px; }
/* anexos */
.tc-attachments { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .5rem; }
.tc-att { display: flex; align-items: center; gap: .7rem; }
.tc-att-thumb { flex: 0 0 auto; width: 60px; height: 44px; border-radius: 6px; overflow: hidden; display: grid; place-items: center; background: var(--tc-chip); color: var(--tc-ink-soft); font-weight: 700; font-size: .72rem; text-decoration: none; }
.tc-att-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tc-att-info { flex: 1 1 auto; min-width: 0; }
.tc-att-name { display: block; font-weight: 600; color: var(--tc-ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-att-name:hover { text-decoration: underline; }
.tc-att-meta { font-size: .76rem; color: var(--muted); }
.tc-att-del { flex: 0 0 auto; border: none; background: none; color: var(--muted); cursor: pointer; font-size: .8rem; text-decoration: underline; }
.tc-att-del:hover { color: var(--tc-danger); }
.tc-att-add { display: inline-block; margin-top: .2rem; background: var(--tc-chip); color: var(--tc-ink); padding: .45rem .8rem; border-radius: 8px; font-size: .85rem; font-weight: 600; cursor: pointer; }
.tc-att-add:hover { background: var(--tc-chip-hover); }
/* notas do card (mig. 096) — o registro do porquê: negativa, finalização,
   o que ficou combinado. Compõe com o mesmo desenho do checklist/anexos. */
.tc-notaadd { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; margin-bottom: .7rem; }
.tc-nota-input {
    width: 100%; padding: .5rem .6rem; border: 1px solid var(--card-border);
    border-radius: 8px; font-family: inherit; font-size: .9rem; resize: vertical;
}
.tc-notas { display: flex; flex-direction: column; gap: .5rem; }
.tc-nota {
    /* Barra à esquerda: separa uma justificativa da seguinte quando há várias
       empilhadas, sem virar uma caixa pesada dentro do modal. */
    padding: .5rem .65rem; border-radius: 8px;
    background: var(--surface); border-left: 3px solid var(--primary);
}
.tc-nota-head { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .2rem; }
.tc-nota-autor { font-size: .84rem; color: var(--tc-ink); }
.tc-nota-at { font-size: .74rem; color: var(--muted); }
.tc-nota-del {
    margin-left: auto; border: 0; background: none; cursor: pointer;
    color: var(--muted); font-size: 1.1rem; line-height: 1; padding: 0 .2rem;
}
.tc-nota-del:hover { color: var(--danger); }
/* `overflow-wrap`: nota colada de outro lugar pode trazer uma linha só,
   enorme, que empurraria a largura do modal. */
.tc-nota-body { font-size: .88rem; color: var(--tc-ink); line-height: 1.45; overflow-wrap: anywhere; }
/* side */
.tc-side { min-width: 0; }
.tc-side-h { margin: 0 0 .5rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.tc-field { display: block; margin-bottom: .6rem; }
/* filho direto: não afeta os spans das sugestões do autocomplete (.ac-list) */
.tc-field > span { display: block; font-size: .76rem; color: var(--muted); margin-bottom: .15rem; }
.tc-field select, .tc-field input { width: 100%; padding: .4rem .5rem; border: 1px solid var(--card-border); border-radius: 8px; background: var(--card); font-family: inherit; }
/* Autocomplete de usuário (campo Cliente do Planejamento) */
.ac { position: relative; }
.ac-list {
    position: absolute; z-index: 30; left: 0; right: 0; top: 100%;
    margin-top: 2px; max-height: 220px; overflow-y: auto;
    background: var(--card); border: 1px solid var(--card-border);
    border-radius: 10px; box-shadow: var(--shadow);
}
.ac-item {
    display: block; width: 100%; text-align: left; cursor: pointer;
    padding: .45rem .6rem; border: 0; background: none; font-family: inherit;
}
.ac-item:hover, .ac-item.is-active { background: var(--primary-soft); }
.ac-name { display: block; font-size: .88rem; font-weight: 600; }
.ac-mail { display: block; font-size: .75rem; color: var(--muted); }
.ac-empty { padding: .5rem .6rem; font-size: .8rem; color: var(--muted); }

.tc-sla { margin: .3rem 0 1rem; }
.tc-del-card { width: 100%; border: none; background: var(--tc-danger-soft); color: var(--tc-danger); padding: .5rem; border-radius: 8px; cursor: pointer; font-weight: 600; }
.tc-del-card:hover { background: var(--tc-danger-soft-hover); }
@media (max-width: 720px) {
    .tc-body { grid-template-columns: 1fr; }
    .tc-modal { padding: 16px 8px; }
}

/* ===================== Financeiro — Reembolsos ===================== */
.re-badge { display: inline-block; padding: .18rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; }
/* Rascunho: cinza de propósito — ele não está "esperando" ninguém, está
   parado com o autor. Cor de estado (âmbar, azul) sugeriria fila. */
.re-rascunho { background: rgba(100,116,139,.16); color: #475569; }
.re-pendente { background: rgba(245,158,11,.14); color: #92600b; }
.re-aprovado { background: rgba(37,99,235,.12); color: #1d4ed8; }
.re-pago { background: rgba(22,163,74,.12); color: #15803d; }
.re-cancelado { background: rgba(220,38,38,.12); color: #b91c1c; }
.re-reprovado { background: rgba(220,38,38,.12); color: #b91c1c; } /* legado */

/* Barra de ações em lote (fila de aprovações) */
.re-bulkbar {
    position: sticky; top: .5rem; z-index: 20;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    margin-top: 1rem; padding: .7rem 1rem; border-radius: 12px;
    background: var(--primary); color: #fff; box-shadow: var(--shadow);
}
.re-bulkbar-info { font-size: .9rem; }
.re-bulkbar-info strong { font-size: 1.05rem; }
.re-bulkbar-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.re-bulkbar .btn-ghost { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .35); color: #fff; }
.re-bulkbar .btn-ghost:hover { background: rgba(255, 255, 255, .22); }
.re-bulkbar .btn { background: var(--card); color: var(--primary); }
.re-bulkbar .btn:hover { background: #f3eaea; }

/* Cards de resumo por status (usam a base .ch-stat) */
/* A soma em R$ embaixo da contagem — é dinheiro empilhado entre cards, então
   também precisa de dígito de largura fixa. */
.re-stat-valor {
    font-size: .9rem; font-weight: 700; color: var(--ch-c, var(--muted)); margin-top: .1rem;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
.re-stat-rascunho  { --ch-c: #64748b; --ch-soft: rgba(100, 116, 139, .14); }
.re-stat-pendente  { --ch-c: #d97706; --ch-soft: rgba(217, 119, 6, .12); }
.re-stat-aprovado  { --ch-c: #2563eb; --ch-soft: rgba(37, 99, 235, .12); }
.re-stat-pago      { --ch-c: #12a150; --ch-soft: rgba(18, 161, 80, .12); }
.re-stat-cancelado { --ch-c: #c0322f; --ch-soft: rgba(192, 50, 47, .12); }
/* linhas repetíveis (pedágio / estacionamento) */
.re-rows { display: flex; flex-direction: column; gap: .5rem; }
.re-row { display: flex; align-items: center; gap: .5rem; }
.re-cell-val { display: inline-flex; align-items: center; gap: .3rem; flex: 0 0 130px; border: 1px solid var(--card-border); border-radius: 8px; padding: 0 .5rem; background: var(--card); }
.re-prefix { color: var(--muted); font-size: .85rem; }
.re-val { border: none; outline: none; width: 100%; padding: .5rem 0; background: transparent; text-align: right; }
.re-desc { flex: 1 1 auto; min-width: 0; padding: .5rem .6rem; border: 1px solid var(--card-border); border-radius: 8px; }
.re-cell-file { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .5rem; }
.re-cell-file input[type="file"] { max-width: 200px; }
.re-proof { color: var(--primary); font-size: .85rem; }
.re-replace { font-size: .8rem; color: var(--muted); cursor: pointer; text-decoration: underline; }
.re-row-del { flex: 0 0 auto; border: none; background: none; color: var(--muted); font-size: 1.3rem; cursor: pointer; line-height: 1; }
.re-row-del:hover { color: #b91c1c; }
.re-veiculo { border-left: 3px solid var(--primary-soft); padding-left: .8rem; margin: .2rem 0 .4rem; }
.re-kmvalue { font-weight: 600; padding-top: .35rem; }
.re-anexos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.re-anexos a { color: var(--primary); text-decoration: none; }
.re-anexos a:hover { text-decoration: underline; }
/* Linha de anexo da compra: nome + tipo + remover, na mesma linha.
   ⚠️ `min-width: 0` no link — sem ele o nome longo do arquivo empurra a
   pílula e o botão para fora do cartão em vez de ser cortado. */
.co-anexo { display: flex; align-items: center; gap: .5rem; }
.co-anexo > a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-anexo .pill { flex: 0 0 auto; }
.co-anexo form { margin-left: auto; flex: 0 0 auto; }
.co-anexo-form { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--card-border); }
.re-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* Rodapé com total em destaque */
.re-total { display: flex; flex-direction: column; gap: .1rem; }
.re-total-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.re-total-val { font-size: 1.6rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.re-submit { padding-inline: 1.4rem; }

/* Cartões de motivo — mini-cards numerados */
.re-motivos-head { margin-bottom: 1rem; }
.re-rows { display: flex; flex-direction: column; gap: .7rem; counter-reset: motivo; }
.re-mrow {
    position: relative; counter-increment: motivo;
    border: 1px solid var(--card-border); border-radius: 14px;
    padding: 1rem 1rem 1rem 2.6rem; background: var(--card);
    box-shadow: var(--shadow-sm);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.re-mrow:hover { border-color: #e3d3d3; }
.re-mrow:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }
.re-mrow-num {
    position: absolute; left: .8rem; top: 1.15rem;
    width: 1.35rem; height: 1.35rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 700; color: #fff; background: var(--primary);
}
.re-mrow-num::before { content: counter(motivo); }

.re-mrow-grid { display: flex; flex-wrap: wrap; gap: .6rem .7rem; align-items: end; }
.re-mrow-grid .ff { margin: 0; }
.re-mrow-grid label { display: block; font-size: .74rem; font-weight: 600; color: var(--muted); margin-bottom: .25rem; }
.re-f-motivo { flex: 1 1 190px; }
.re-mrow-km { flex: 0 0 84px; }
.re-mrow-km .re-km { width: 100%; padding: .55rem .6rem; border: 1px solid var(--card-border); border-radius: 8px; background: var(--surface); text-align: right; }
.re-f-valor { flex: 0 0 130px; }
.re-mrow .re-cell-val { width: 100%; background: var(--surface); }
.re-mrow-desc { flex: 3 1 220px; }
.re-mrow-desc input { width: 100%; padding: .55rem .7rem; border: 1px solid var(--card-border); border-radius: 8px; background: var(--surface); }
.re-mrow-file { flex: 0 0 auto; }
.re-val[readonly] { color: var(--muted); cursor: not-allowed; }
.re-mrow .re-row-del {
    align-self: center; margin-bottom: .1rem; width: 2rem; height: 2rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px; border: 1px solid transparent; background: none;
    color: var(--muted); font-size: 1.3rem; line-height: 1; cursor: pointer;
    transition: background .15s, color .15s;
}
.re-mrow .re-row-del:hover { background: var(--danger-soft); color: var(--danger); }

/* Anexo estilizado (label com input escondido) */
.re-file-wrap { display: flex; align-items: center; gap: .5rem; }
.re-file {
    display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; max-width: 170px;
    padding: .5rem .7rem; border-radius: 8px; font-size: .85rem; font-weight: 600;
    color: var(--muted); background: var(--surface); border: 1px dashed var(--card-border);
    transition: border-color .15s, color .15s, background .15s;
}
.re-file:hover { color: var(--text); border-color: var(--primary); }
.re-file svg { width: 15px; height: 15px; flex: none; }
.re-file-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.re-file.has-file { color: var(--primary); border-style: solid; border-color: var(--primary-soft); background: var(--primary-soft); }
.re-proof { color: var(--primary); font-size: .8rem; text-decoration: none; white-space: nowrap; }
.re-proof:hover { text-decoration: underline; }

/* Botão adicionar motivo (tracejado, discreto) */
.re-motivos-foot { display: flex; justify-content: flex-end; margin-top: .9rem; }
.re-add {
    display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
    padding: .6rem 1rem; border-radius: 10px; font-size: .9rem; font-weight: 600;
    color: var(--primary); background: var(--primary-soft); border: 1px solid transparent;
    transition: background .15s, border-color .15s;
}
.re-add:hover { border-color: var(--primary); }
.re-add svg { width: 16px; height: 16px; }

/* Revelação suave dos blocos ao abrir a tela */
.reembolso-form > .card,
.reembolso-form > .grid-2 { animation: re-rise .4s ease both; }
.reembolso-form > .grid-2 { animation-delay: .04s; }
.reembolso-form > .re-motivos { animation-delay: .08s; margin-top: 50px;}
.reembolso-form > .re-footer { animation-delay: .12s; }
@keyframes re-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .reembolso-form > .card, .reembolso-form > .grid-2 { animation: none; }
}

@media (max-width: 720px) {
    .re-mrow-desc, .re-f-motivo { flex: 1 1 100%; }
    .re-f-valor { flex: 1 1 100%; }
    .re-file { max-width: none; }
}
/* timeline */
.re-timeline { list-style: none; margin: 0; padding: 0; }
.re-timeline li { position: relative; display: flex; gap: .7rem; padding: 0 0 .9rem; }
.re-timeline li:not(:last-child) .re-tl-dot::after { content: ""; position: absolute; left: 5px; top: 14px; bottom: -2px; width: 2px; background: var(--card-border); }
.re-tl-dot { position: relative; flex: 0 0 auto; width: 12px; height: 12px; margin-top: 3px; border-radius: 50%; background: #b9a9a9; }
.re-tl-dot.re-criado { background: #6b7280; }
.re-tl-dot.re-aprovado { background: #2563eb; }
.re-tl-dot.re-pago { background: #15803d; }
.re-tl-dot.re-cancelado { background: #b91c1c; }
.re-tl-dot.re-reprovado { background: #b91c1c; }
.re-tl-dot.re-editado { background: #6366f1; }
.re-tl-meta { display: block; color: var(--muted); font-size: .78rem; }
.re-tl-desc { display: block; color: #6a5a5a; font-size: .84rem; margin-top: .1rem; }
/* Pontos da linha do tempo — compras */
.re-tl-dot.re-analisado { background: #2563eb; }
.re-tl-dot.re-comprado { background: #7c3aed; }
.re-tl-dot.re-entregue { background: #12a150; }

/* ===== ADM » Compras ===== */
/* Badges de status */
.co-badge { display: inline-block; padding: .18rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.co-solicitado { background: rgba(217,119,6,.14); color: #92600b; }
.co-analisado  { background: rgba(37,99,235,.12); color: #1d4ed8; }
.co-aprovado   { background: rgba(8,145,178,.14); color: #0e7490; }
.co-comprado   { background: rgba(124,58,237,.12); color: #6d28d9; }
.co-entregue   { background: rgba(18,161,80,.12); color: #15803d; }
.co-cancelado  { background: rgba(192,50,47,.12); color: #b91c1c; }
/* Cores dos cards (reusam .ch-stat via --ch-c/--ch-soft) */
.co-stat-solicitado { --ch-c: #d97706; --ch-soft: rgba(217,119,6,.12); }
.co-stat-analisado  { --ch-c: #2563eb; --ch-soft: rgba(37,99,235,.12); }
.co-stat-aprovado   { --ch-c: #0891b2; --ch-soft: rgba(8,145,178,.12); }
.co-stat-comprado   { --ch-c: #7c3aed; --ch-soft: rgba(124,58,237,.12); }
.co-stat-entregue   { --ch-c: #12a150; --ch-soft: rgba(18,161,80,.12); }
.co-stat-cancelado  { --ch-c: #c0322f; --ch-soft: rgba(192,50,47,.12); }

/* Linhas de orçamento (form) */
.co-orow { border: 1px solid var(--card-border); border-radius: 12px; padding: .8rem; background: var(--surface); }
.co-orow + .co-orow { margin-top: .5rem; }
.co-orow-grid { display: flex; flex-wrap: wrap; gap: .6rem .7rem; align-items: end; }
.co-orow-grid .ff { margin: 0; }
.co-orow-grid label { display: block; font-size: .74rem; font-weight: 600; color: var(--muted); margin-bottom: .25rem; }
.co-f-forn { flex: 2 1 200px; }
.co-f-forn input, .co-f-link input { width: 100%; padding: .5rem .6rem; border: 1px solid var(--card-border); border-radius: 8px; background: var(--card); }
.co-f-valor { flex: 0 0 130px; }
.co-orow-grid .re-cell-val { width: 100%; background: var(--card); }
/* Valor unitário × Qtd = Valor total. Os sinais ficam na altura da caixa
   (a linha é alinhada pela base), e a quebra forçada joga NF, link e anexo
   para a segunda linha — com sete campos na mesma, o flex quebrava em lugares
   diferentes conforme a largura e a conta ficava partida ao meio. */
/* Todas as caixas da linha com a MESMA altura: com `align-items: end`, caixa
   mais alta empurra o próprio rótulo para cima e a linha fica em degraus. */
.co-orow-grid input:not([type="hidden"]), .co-orow-grid select, .co-orow-grid .re-cell-val { height: 2.5rem; box-sizing: border-box; }
/* A célula "R$ ___" é UMA caixa. A regra geral `.ff input` (0,1,1) desenhava
   outra dentro dela, com fundo e borda próprios; o anel de foco passa para a
   célula inteira. */
.co-orow-grid .re-cell-val .re-val { height: 100%; border: none; border-radius: 0; background: transparent; padding: 0; box-shadow: none; }
.co-orow-grid .re-cell-val:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.co-op { align-self: flex-end; line-height: 2.5rem; color: var(--muted); font-weight: 700; font-size: .95rem; }
.co-f-qtd { flex: 0 0 76px; }
.co-f-total { flex: 0 0 150px; }
/* Qtd (copiada da solicitação) e total (calculado) são EXIBIÇÃO: borda
   tracejada e sem fundo de campo, para não parecerem lugar onde se digita. */
.co-orow-grid .co-total { background: transparent; border-style: dashed; }
.co-total output { display: block; margin-left: auto; font-weight: 700; color: var(--text);
                   font-variant-numeric: tabular-nums; white-space: nowrap; }
.co-total.is-vazio output { font-weight: 500; color: var(--muted); }
.co-qtd { cursor: default; }
.co-qtd output { font-weight: 600; }
.co-orow-quebra { flex-basis: 100%; height: 0; }
.co-f-nf { flex: 0 0 90px; }
.co-f-link { flex: 2 1 200px; }
.co-f-file { flex: 1 1 240px; }
.co-f-file input[type="file"] { max-width: 100%; padding: .3rem .4rem; background: var(--card); font-size: .85rem; }
.co-orow .re-row-del { align-self: flex-end; line-height: 2.5rem; }
.co-orow-nota { margin: .5rem 0 0; }
@media (max-width: 720px) {
    .co-orow { position: relative; }
    .co-f-forn { flex: 1 1 100%; padding-right: 1.6rem; }
    .co-f-valor, .co-f-total { flex: 1 1 0; min-width: 0; }
    .co-f-qtd { flex: 0 0 64px; }
    /* NF e link dividem a linha de baixo; a quebra forçada continua valendo,
       senão o "Emite NF?" subia para a linha da conta e cortava o valor. */
    .co-f-link { flex: 1 1 160px; min-width: 0; }
    /* O × sobe para o canto: na linha da conta ele roubaria a largura do total. */
    .co-orow .re-row-del { position: absolute; top: .55rem; right: .6rem; line-height: 1; }
}

/* Detalhe — orçamento vencedor + escolha */
tr.co-win { background: rgba(18,161,80,.06); }
.co-choose { display: flex; flex-direction: column; gap: .35rem; }
.co-choose .check { margin: 0; }

/* ===== Fornecedores e prestadores ===== */
/* Badges de status. Reusa .co-badge e os estados que já existem
   (co-solicitado, co-cancelado); aqui só entram os que faltavam. */
.co-em_cadastro  { background: rgba(37,99,235,.12); color: #1d4ed8; }
.co-em_validacao { background: rgba(124,58,237,.12); color: #6d28d9; }
.co-ativo        { background: rgba(18,161,80,.12); color: #15803d; }
.co-encerrado    { background: rgba(100,116,139,.16); color: #475569; }
.co-recusado     { background: rgba(192,50,47,.12); color: #b91c1c; }

/* Cards de resumo (reusam .ch-stat via --ch-c/--ch-soft) */
.fo-stat-solicitado { --ch-c: #d97706; --ch-soft: rgba(217,119,6,.12); }
.fo-stat-cadastro   { --ch-c: #2563eb; --ch-soft: rgba(37,99,235,.12); }
.fo-stat-validacao  { --ch-c: #7c3aed; --ch-soft: rgba(124,58,237,.12); }
.fo-stat-ativo      { --ch-c: #12a150; --ch-soft: rgba(18,161,80,.12); }
.fo-stat-encerrado  { --ch-c: #64748b; --ch-soft: rgba(100,116,139,.14); }
.fo-stat-recusado   { --ch-c: #c0322f; --ch-soft: rgba(192,50,47,.12); }

/* Linhas destacadas nas listas */
tr.fo-inativo  { opacity: .62; }
tr.fo-vencendo { background: rgba(217,119,6,.09); }
tr.fo-vencido  { background: rgba(192,50,47,.07); }

/* Checklist da etapa de validação */
.fo-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.fo-check li { display: flex; gap: .55rem; align-items: flex-start; font-size: .9rem; }
.fo-check-ico {
    flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .74rem; font-weight: 700; line-height: 1; margin-top: .1rem;
}
.fo-check .fo-ok  .fo-check-ico { background: rgba(18,161,80,.14); color: #15803d; }
.fo-check .fo-nok .fo-check-ico { background: rgba(192,50,47,.12); color: #b91c1c; }
.fo-check .fo-nok strong { color: #b91c1c; }
.fo-check-hint { display: block; font-size: .78rem; color: var(--muted); margin-top: .1rem; }

/* Valor vigente do contrato */
.fo-valor-atual { font-size: 1.45rem; font-weight: 700; margin: 0 0 .8rem; }
.fo-valor-atual .hint { font-size: .82rem; font-weight: 400; margin-left: .4rem; }

/* Formulário curto da solicitação */
.fo-form-card { max-width: 720px; }

/* ---- Etapa 5: avaliação do serviço ---- */
/* Só para leitor de tela: o rótulo da estrela precisa dizer a nota, mas o
   desenho é o ★ sozinho. */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Estrelas em radio puro — a CSP proíbe JS inline, então quem "pinta" é o
   CSS. Os inputs saem de 5 a 1 no HTML e o `row-reverse` os desenha na ordem
   certa: assim `input:checked ~ label` acende da esquerda até a nota. */
.aval-linha { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .45rem; }
.aval-rotulo { flex: 1 1 200px; font-size: .9rem; }
.aval-stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; }
.aval-stars input { position: absolute; opacity: 0; width: 0; height: 0; }
.aval-stars label {
    font-size: 1.45rem; line-height: 1; color: var(--card-border);
    cursor: pointer; padding: 0 .06rem; transition: color .12s ease;
}
.aval-stars input:checked ~ label,
.aval-stars label:hover,
.aval-stars label:hover ~ label { color: #f59e0b; }
/* Foco visível pelo teclado: sem isto a navegação por Tab fica cega. */
.aval-stars input:focus-visible + label { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.aval-form { margin-top: .3rem; }

/* Resumo — média grande + barras por critério */
.aval-resumo { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-bottom: .8rem; }
.aval-media { display: flex; align-items: baseline; gap: .15rem; padding: .35rem .7rem; border-radius: var(--radius); }
.aval-media-num { font-size: 1.7rem; font-weight: 700; line-height: 1; }
.aval-media-max { font-size: .85rem; opacity: .7; }
.aval-media-info { display: flex; flex-direction: column; gap: .1rem; }
.aval-bom   { background: rgba(18,161,80,.12);  color: #15803d; }
.aval-medio { background: rgba(217,119,6,.14);  color: #92600b; }
.aval-ruim  { background: rgba(192,50,47,.12);  color: #b91c1c; }
.aval-vazio { background: rgba(100,116,139,.14); color: #475569; }
.aval-flag  { color: #b45309; font-size: .8rem; font-weight: 600; }

.aval-criterios { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.aval-criterios li { display: flex; align-items: center; gap: .6rem; font-size: .86rem; }
.aval-crit-nome { flex: 0 0 190px; color: var(--muted); }
.aval-bar { flex: 1 1 auto; height: 8px; border-radius: 999px; background: var(--surface); overflow: hidden; min-width: 60px; }
.aval-bar-fill { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.aval-crit-nota { flex: 0 0 42px; text-align: right; font-weight: 600; }
@media (max-width: 620px) { .aval-crit-nome { flex-basis: 120px; } }

/* Nota compacta, usada em tabela e em cabeçalho de item */
.aval-nota-inline {
    display: inline-block; padding: .1rem .45rem; border-radius: 999px;
    font-size: .8rem; font-weight: 700;
}

/* Lista de avaliações registradas */
.aval-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.aval-lista > li { border-left: 3px solid var(--card-border); padding-left: .7rem; }
.aval-lista-topo { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-bottom: .1rem; }
.aval-comentario { margin: .3rem 0 0; font-size: .9rem; }

/* Bolinhas da linha do tempo (reusam .re-tl-dot) */
.re-tl-dot.fo-tl-avaliacao  { background: #f59e0b; }
.re-tl-dot.fo-tl-solicitado { background: #d97706; }
.re-tl-dot.fo-tl-cadastro   { background: #2563eb; }
.re-tl-dot.fo-tl-validacao  { background: #7c3aed; }
.re-tl-dot.fo-tl-ativo      { background: #12a150; }
.re-tl-dot.fo-tl-recusado   { background: #c0322f; }
.re-tl-dot.fo-tl-cancelado  { background: #c0322f; }
.re-tl-dot.fo-tl-encerrado  { background: #64748b; }
.re-tl-dot.fo-tl-documento  { background: #0891b2; }
.re-tl-dot.fo-tl-valor      { background: #b45309; }
.re-tl-dot.fo-tl-alerta     { background: #d97706; }
.re-tl-dot.fo-tl-edicao     { background: var(--muted); }

/* ==========================================================================
   ADM » Dashboard — Conteúdos (Artigos/Avisos/Tutoriais): editor + dashboard
   ========================================================================== */

/* ---- Editor rich-text (estilo Word) ---- */
.rte { border: 1px solid var(--card-border); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.rte-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .15rem;
    padding: .35rem .4rem; background: var(--surface); border-bottom: 1px solid var(--card-border);
}
.rte-btn {
    min-width: 30px; height: 30px; padding: 0 .45rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid transparent; border-radius: 6px;
    font-size: .9rem; line-height: 1; color: var(--text); cursor: pointer;
}
.rte-btn:hover { background: var(--primary-soft); border-color: var(--card-border); }
.rte-btn:active { background: var(--primary-soft); }
.rte-sep { width: 1px; align-self: stretch; margin: .2rem .25rem; background: var(--card-border); }
.rte-area {
    min-height: 260px; max-height: 55vh; overflow-y: auto;
    padding: .9rem 1rem; outline: none; font-size: .95rem; line-height: 1.6;
}
.rte-area:focus { box-shadow: inset 0 0 0 2px var(--primary-soft); }

/* Conteúdo renderizado (editor + leitura + mural) */
.rte-content > *:first-child { margin-top: 0; }
.rte-content > *:last-child { margin-bottom: 0; }
.rte-content h1 { font-size: 1.5rem; margin: 1rem 0 .5rem; }
.rte-content h2 { font-size: 1.25rem; margin: 1rem 0 .5rem; }
.rte-content h3 { font-size: 1.1rem; margin: .8rem 0 .4rem; }
.rte-content p { margin: .5rem 0; }
.rte-content ul, .rte-content ol { margin: .5rem 0; padding-left: 1.5rem; }
.rte-content blockquote {
    margin: .7rem 0; padding: .4rem .9rem; border-left: 3px solid var(--primary);
    background: var(--primary-soft); border-radius: 0 6px 6px 0; color: var(--text);
}
.rte-content a { color: var(--primary); }
.rte-content img { max-width: 100%; height: auto; border-radius: 8px; }
/* Vídeo: `display:block` porque o padrão inline deixa uma faixa de descida
   embaixo do player, e `max-width` para ele nunca estourar a coluna. */
.rte-content video { display: block; max-width: 100%; height: auto; margin: .6rem 0; border-radius: 8px; background: #000; }

/* Recado do editor (enviando…/erro) — o alvo do `data-rte-status` do rte.js. */
.rte-status {
    margin: 0; padding: .45rem .8rem;
    border-top: 1px solid var(--card-border); background: var(--surface);
    color: var(--muted); font-size: .85rem;
}
.rte-status.is-erro { color: var(--alert-error-ink); }
.rte.is-enviando .rte-toolbar { opacity: .6; pointer-events: none; }

/* Capa (form) */
.cover-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.cover-preview { width: 120px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--card-border); }

/* ---- Grid de 12 colunas do projeto ----
   Nasceu na dashboard e o nome ficou, mas é o grid genérico: Tarefas também o
   usa (filtros em col-3 + lista em col-9). Antes de criar outro grid, reuse
   este. */
.dash-row {
    display: grid; grid-template-columns: repeat(12, 1fr);
    gap: 1rem; align-items: start; margin-top: 1.6rem;
}
.dash-row > .col-3  { grid-column: span 3; min-width: 0; }
.dash-row > .col-4  { grid-column: span 4; min-width: 0; }
.dash-row > .col-5  { grid-column: span 5; min-width: 0; }
.dash-row > .col-6  { grid-column: span 6; min-width: 0; }
.dash-row > .col-8  { grid-column: span 8; min-width: 0; }
.dash-row > .col-9  { grid-column: span 9; min-width: 0; }
.dash-row > .col-12 { grid-column: span 12; min-width: 0; }
@media (max-width: 1200px) {
    .dash-row > .col-3 { grid-column: span 6; }
    .dash-row > .col-4 { grid-column: span 6; }
    .dash-row > .col-5 { grid-column: span 12; }
    /* ⚠️ `.col-8` FALTAVA aqui. O par 8+4 (RH, Tele Atendimento, NOC → IPBX e
       Operadoras → ver) quebrava feio nesta faixa: o `.col-8` continuava com 8
       faixas e o `.col-4` virava 6, que não cabem juntas — a segunda coluna
       descia deixando um vão de 4 faixas na primeira linha. Full + metade é o
       mesmo par que `.col-9`/`.col-3` já faz. */
    .dash-row > .col-8 { grid-column: span 12; }
    .dash-row > .col-9 { grid-column: span 12; }
}
@media (max-width: 980px) {
    .dash-row > .col-3, .dash-row > .col-4, .dash-row > .col-5,
    .dash-row > .col-6, .dash-row > .col-8, .dash-row > .col-9 { grid-column: span 12; }
}

/* Empilhamento de cards dentro de uma coluna (agenda + conversas) */
.dash-stack { display: flex; flex-direction: column; gap: 1rem; }
.dash-row:first-of-type { margin-top: .4rem; }
.dash-section-title { font-size: 1.05rem; margin: 0 0 .7rem; }

/* ---- Card de painel com cabeçalho, altura fixa e rolagem ---- */
.dash-card {
    height: 400px; display: flex; flex-direction: column; overflow: hidden;
    background: var(--card); border: 1px solid var(--card-border);
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.dash-card-head {
    flex: 0 0 auto; padding: .8rem 1rem; font-weight: 700; font-size: .98rem;
    background: rgba(0, 0, 0, .04); border-bottom: 1px solid var(--card-border);
}
.dash-card.dash-card-auto { height: auto; max-height: 380px; }
.dash-card-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.dash-card-body-pad { padding: 1rem; }
.dash-card-foot { flex: 0 0 auto; border-top: 1px solid var(--card-border); }
.dash-card-foot a { display: block; padding: .65rem 1rem; text-align: center; font-size: .82rem; font-weight: 600; color: var(--primary); text-decoration: none; }
.dash-card-foot a:hover { text-decoration: underline; }
.dash-card-foot-split { display: flex; align-items: center; justify-content: space-between; }
.dash-card-foot-split a { text-align: left; }
.dash-foot-meta { padding-right: 1rem; font-size: .76rem; color: var(--muted); white-space: nowrap; }

/* ---- Aviso em destaque (painel) ---- */
.aviso-feature { position: relative; }
.aviso-flag {
    display: inline-block; margin-bottom: .5rem; padding: .12rem .55rem; border-radius: 999px;
    background: var(--primary-soft); color: var(--primary); font-size: .72rem; font-weight: 700;
}
.aviso-feature-titulo { margin: 0; font-size: 1.15rem; line-height: 1.3; }
.aviso-feature-data { display: block; margin: .25rem 0 .8rem; font-size: .76rem; color: var(--muted); }
.aviso-feature-corpo { font-size: .92rem; color: var(--text); line-height: 1.6; }

/* Cabeçalho do item no mural (página /avisos) */
.aviso-item-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-bottom: .4rem; }
.aviso-item-head .aviso-titulo { margin: 0; }
.aviso-data { flex: 0 0 auto; font-size: .76rem; color: var(--muted); }

/* ---- Quadro de conversas ---- */
.conv-list { list-style: none; margin: 0; padding: 0; }
.conv-item {
    display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem;
    border-bottom: 1px solid var(--card-border); color: inherit; text-decoration: none;
}
.conv-item:hover { background: var(--surface); }
.conv-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.conv-avatar-initial { display: grid; place-items: center; background: var(--primary); color: #fff; font-weight: 700; font-size: 1rem; }
.conv-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.conv-top { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.conv-title { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-time { flex: 0 0 auto; font-size: .72rem; color: var(--muted); }
.conv-prev { font-size: .82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-badge {
    flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 .35rem; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary); color: #fff; font-size: .72rem; font-weight: 700;
}
.conv-all { display: block; padding: .6rem .9rem; font-size: .82rem; font-weight: 600; color: var(--primary); text-decoration: none; }
.conv-all:hover { text-decoration: underline; }

/* ---- Agenda do dia ---- */
.agenda-data { font-weight: 500; font-size: .82rem; color: var(--muted); margin-left: .4rem; }
.agenda-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .6rem; }
.agenda-list.agenda-list-narrow { grid-template-columns: 1fr; }
.agenda-connect { display: flex; flex-direction: column; align-items: flex-start; }
.agenda-item { display: flex; align-items: flex-start; gap: .7rem; padding: .55rem .7rem; border: 1px solid var(--card-border); border-radius: 10px; background: var(--surface); }
.agenda-hora { flex: 0 0 auto; min-width: 92px; font-weight: 700; font-size: .82rem; color: var(--primary); padding-top: .1rem; }
.agenda-info { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; gap: .1rem; }
.agenda-titulo { font-weight: 600; font-size: .9rem; }
.agenda-local { font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Botão "Entrar" da videochamada (Meet) do evento */
.agenda-meet {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: .25rem;
    padding: .22rem .5rem; border-radius: 999px; text-decoration: none;
    background: var(--primary-soft); color: var(--primary);
    font-size: .75rem; font-weight: 700; white-space: nowrap;
}
.agenda-meet:hover { background: var(--primary); color: #fff; }

/* Overlay de carregamento (busca de CNPJ e afins) */
.nn-loading {
    position: fixed; inset: 0; z-index: 1300; display: none;
    align-items: center; justify-content: center;
    background: rgba(20, 12, 12, .5); backdrop-filter: blur(2px);
    animation: nn-load-fade .15s ease-out;
}
.nn-loading.is-on { display: flex; }
.nn-loading-box {
    display: flex; flex-direction: column; align-items: center; gap: .8rem;
    padding: 1.8rem 2.2rem; text-align: center;
    background: var(--card); border: 1px solid var(--card-border);
    border-radius: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}
.nn-loading-text { font-weight: 700; font-size: 1rem; color: var(--text); }
.nn-loading-sub { font-size: .82rem; color: var(--muted); }
.nn-spinner {
    width: 42px; height: 42px; border-radius: 50%;
    border: 4px solid var(--primary-soft); border-top-color: var(--primary);
    animation: nn-spin .8s linear infinite;
}
@keyframes nn-spin { to { transform: rotate(360deg); } }
@keyframes nn-load-fade { from { opacity: 0; } to { opacity: 1; } }
/* ⚠️ Era o único spinner do sistema SEM esta guarda (`.at-spin` e `.bo-spinner`
   têm). Quem pediu menos movimento não deve receber um giro perpétuo. */
@media (prefers-reduced-motion: reduce) {
    .nn-spinner { animation: none; }
    .nn-loading { animation: none; }
}

/* ============ Portal da Operadora (public_painel) ============ */
.op-topbar { background: var(--card); border-bottom: 1px solid var(--card-border); position: sticky; top: 0; z-index: 50; }
.op-topbar-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 1.2rem; padding: .6rem 1rem; }
.op-brand { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: inherit; }
.op-brand img { height: 34px; width: auto; }
.op-badge { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--primary); background: var(--primary-soft); padding: .12rem .5rem; border-radius: 999px; }
.op-nav { display: flex; gap: .3rem; margin-left: 1rem; }
.op-link { padding: .45rem .7rem; border-radius: 8px; text-decoration: none; color: var(--text); font-size: .9rem; }
.op-link:hover { background: var(--surface); }
.op-link.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.op-user { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.op-user-name { font-size: .85rem; color: var(--muted); }
.op-main { max-width: 1200px; margin: 0 auto; padding: 1.4rem 1rem 3rem; }

.op-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.op-cta { display: flex; align-items: center; gap: .9rem; padding: 1.1rem; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.op-cta:hover { border-color: var(--primary); transform: translateY(-2px); }
.op-cta-ico { font-size: 1.8rem; }

/* ── Dashboard do portal da Operadora ────────────────────────────────────
   Os quatro indicadores reusam o `.stat` do sistema; o que segue é só o que
   esta tela acrescenta. */

/* O indicador que PEDE AÇÃO NOSSA ("aguardando processamento").
   ⚠️ É o único pintado, e de propósito: ele é a pergunta que a operadora abre
   a tela para responder. Pintando os quatro, nenhum se destacaria.
   ⚠️ A tinta é o token `--alert-warn-ink`, nunca um âmbar escrito à mão: sobre
   fundo translúcido o hex fixo reprova em um dos dois modos — a armadilha já
   registrada nos `.badge-*`. */
.op-stat-atencao { border-left: 3px solid var(--alert-warn-ink); }
.op-stat-atencao .value { color: var(--alert-warn-ink); }

/* O indicador que leva a algum lugar. ⚠️ `color: inherit` + `text-decoration:
   none`: ele é um `<a>`, e sem isso o número herdaria o azul sublinhado do
   navegador, deixando de parecer um indicador. */
.op-stat-link { display: block; color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.op-stat-link:hover { border-color: var(--primary); transform: translateY(-2px); }

/* A data do último envio no lugar de um número: `.value` é grande demais para
   "24/09/2026", que sairia quebrado em duas linhas numa coluna estreita. */
.op-stat-data { font-size: 1.35rem; }

/* Legenda do gráfico de rosca — é ela que dá nome à cor da fatia. */
/* Rosca + legenda lado a lado: num card de meia tela a legenda embaixo
   deixaria metade da área vazia. ⚠️ `flex-wrap` + `min-width: 0` na legenda
   para ela quebrar para baixo no estreito em vez de espremer a rosca. */
.op-donut { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.op-donut-svg { flex: 0 0 auto; }
.op-donut .op-legenda { flex: 1 1 200px; min-width: 0; margin-top: 0; }

.op-legenda { list-style: none; margin: .8rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.op-legenda li { display: flex; align-items: center; gap: .5rem; font-size: .85rem; min-width: 0; }
/* `flex: 0 0 auto` para o quadradinho não encolher quando o rótulo é longo. */
.op-legenda-cor { flex: 0 0 auto; display: block; }
/* ⚠️ O texto fica em tinta NORMAL, não na cor da fatia: cor de gráfico é
   escolhida para separar fatias, não para ser lida em 13px — várias reprovam
   contraste como texto. Quem carrega a identidade é o quadradinho. */
.op-legenda-txt { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-legenda-n { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Mapeamento de colunas — lista em 2 colunas: rótulo | select */
.map-grid { display: flex; flex-direction: column; }
.map-row {
    display: grid; grid-template-columns: 260px minmax(0, 1fr);
    align-items: center; gap: 1rem; padding: .5rem 0;
    border-bottom: 1px solid var(--card-border);
}
.map-row:last-child { border-bottom: 0; }
.map-label { font-size: .92rem; font-weight: 600; }
.map-row select { width: 100%; }
@media (max-width: 640px) {
    .map-row { grid-template-columns: 1fr; gap: .25rem; padding: .6rem 0; }
}

/* Botão "Conectar Google" */
.btn-google { display: inline-flex; align-items: center; gap: .55rem; }
.btn-google .g-mark {
    display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
    background: #fff; color: #4285F4; font-weight: 800; font-family: Arial, sans-serif; font-size: .8rem;
}

/* ---- Quadro de chamados ---- */
.chm-list { list-style: none; margin: 0; padding: 0; }
.chm-item {
    display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem;
    border-bottom: 1px solid var(--card-border); color: inherit; text-decoration: none;
}
.chm-item:hover { background: var(--surface); }
.chm-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.chm-assunto { font-weight: 600; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chm-proto { font-size: .74rem; color: var(--muted); }
.chm-item .pill { flex: 0 0 auto; }
/* Linha de lista que NÃO é link (card do Meu RH) — mesma forma, sem o realce. */
.chm-static { cursor: default; }
.chm-static:hover { background: transparent; }

/* ---- Card "Meu RH" da dashboard (bloco lazy `_bloco_rh`) ---- */
.rhm-tiles {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    background: var(--card-border); border-bottom: 1px solid var(--card-border);
}
/* O gap de 1px sobre o fundo da borda desenha o divisor entre os dois — sem
   borda por tile, que se somaria à do card e engrossaria a linha. */
.rhm-tile {
    display: flex; flex-direction: column; gap: .15rem;
    padding: .8rem .9rem; background: var(--card);
}
.rhm-valor {
    font-size: 1.5rem; font-weight: 700; line-height: 1.1; color: var(--text);
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
    white-space: nowrap;
}
.rhm-valor small { font-size: .78rem; font-weight: 600; color: var(--muted); }
/* Saldo negativo é hora DEVIDA — o sinal sozinho passa despercebido no relance.
   ⚠️ A tinta é a da família `--alert-*-ink`, não `--danger`/`--success`: aquelas
   duas foram escolhidas para BORDA e preenchimento, e `--success` (#12a150) mede
   3,37:1 sobre o card claro — passaria só por ser texto grande. As do alerta dão
   5,85:1 e 6,57:1 no claro, 9,77:1 e 7,60:1 no escuro. */
.rhm-tile.rhm-neg .rhm-valor { color: var(--alert-error-ink); }
.rhm-tile.rhm-pos .rhm-valor { color: var(--alert-success-ink); }
.rhm-rotulo { font-size: .74rem; color: var(--muted); line-height: 1.35; }
.rhm-extra { display: block; }
.rhm-nota { margin: 0; padding: .6rem .9rem; font-size: .78rem; }
.rhm-alerta { color: var(--alert-warn-ink); background: rgba(217, 119, 6, .1); }
.rhm-lista { border-top: 1px solid var(--card-border); }
.aviso-mural { display: grid; gap: .8rem; }
.aviso-item {
    padding: 1rem 1.1rem; background: var(--card); border: 1px solid var(--card-border);
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.aviso-item.is-destaque { border-left: 4px solid var(--primary); background: var(--primary-soft); }
.aviso-titulo { margin: 0 0 .4rem; font-size: 1.02rem; }
.aviso-corpo { font-size: .92rem; color: var(--text); }

/* Grid de artigos/tutoriais */
.artigo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
/* Tutoriais: em linha, até 6 por linha (colunas menores) */
.tut-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
@media (min-width: 1200px) { .tut-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.artigo-card {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--card); border: 1px solid var(--card-border);
    border-radius: var(--radius); box-shadow: var(--shadow); color: inherit; text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.artigo-card:hover { border-color: var(--primary); box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-2px); }
.artigo-cover {
    display: block; height: 130px; background-size: cover; background-position: center;
    background-color: var(--primary-soft);
}
.artigo-cover-empty { display: grid; place-items: center; font-size: 2.4rem; }
/* Capa como <img loading="lazy">, no lugar do background via InlineCss: o
   navegador só baixa quando a card se aproxima da tela, e o <head> deixa de
   carregar uma regra por capa. Mesma caixa de 130px. */
.artigo-cover-img { display: block; width: 100%; height: 130px; object-fit: cover; }
.artigo-body { display: flex; flex-direction: column; gap: .35rem; padding: .8rem .9rem 1rem; }
.artigo-titulo { font-weight: 700; font-size: 1rem; }
.artigo-resumo { font-size: .85rem; color: var(--muted); line-height: 1.4; }
.artigo-mais { margin-top: .3rem; font-size: .82rem; font-weight: 600; color: var(--primary); }

/* Aniversariantes — lista dentro do card, um abaixo do outro */
.bday-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bday-item { display: flex; align-items: center; gap: .7rem; padding: .6rem 0; border-bottom: 1px solid var(--card-border); }
.bday-item:first-child { padding-top: 0; }
.bday-item:last-child { padding-bottom: 0; border-bottom: 0; }
.bday-dia {
    flex: 0 0 auto; min-width: 40px; height: 34px; padding: 0 .4rem; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .95rem; line-height: 1;
    background: var(--primary-soft); color: var(--primary);
}
.bday-dia small { font-size: .62rem; font-weight: 600; opacity: .8; }
.bday-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.bday-avatar-initial { display: grid; place-items: center; background: var(--primary); color: #fff; font-weight: 700; font-size: 1rem; }
.bday-info { display: flex; flex-direction: column; min-width: 0; }
.bday-nome { font-weight: 600; font-size: .92rem; }
.bday-cargo { font-size: .78rem; color: var(--muted); }

/* Página de leitura */
.conteudo-ler .conteudo-cover { width: 100%; max-height: 550px; object-fit: cover; border-radius: 10px; margin-bottom: 1rem; }
.conteudo-corpo { font-size: 1rem; line-height: 1.7; }

/* ---- Pop-up de aniversário ---- */
.bday-modal {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center; padding: 1rem;
    animation: bday-fade .2s ease-out;
}
.bday-modal.is-hidden { display: none; }
.bday-backdrop { position: absolute; inset: 0; background: rgba(20, 12, 12, .68); backdrop-filter: blur(2px); }
.bday-box, .bday-preview {
    position: relative; width: 100%; max-width: 440px; text-align: center;
    padding: 2.4rem 1.6rem 1.6rem;
    background: var(--card); border: 1px solid var(--card-border);
    border-top: 6px solid var(--primary); border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28); overflow: hidden;
}
/* Faixa de cor suave, opaca (o card atrás garante a opacidade). */
.bday-box::before, .bday-preview::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 130px;
    background: linear-gradient(180deg, var(--primary-soft), transparent); pointer-events: none; z-index: 0;
}
.bday-box > *, .bday-preview > * { position: relative; z-index: 1; }
.bday-box { animation: bday-pop .25s cubic-bezier(.2, 1.1, .4, 1); }
.bday-x {
    position: absolute; top: .6rem; right: .8rem; background: none; border: none;
    font-size: 1.7rem; line-height: 1; color: var(--muted); cursor: pointer;
}
.bday-x:hover { color: var(--text); }
.bday-confetti { font-size: 1.15rem; letter-spacing: .25rem; opacity: .9; margin-bottom: .4rem; }
.bday-ico { font-size: 3.4rem; line-height: 1; margin: .2rem 0 .6rem; animation: bday-bob 2s ease-in-out infinite; }
.bday-title { margin: 0 0 .6rem; font-size: 1.5rem; color: var(--primary); }
.bday-msg { margin: 0 0 1.2rem; font-size: 1rem; line-height: 1.6; color: var(--text); }
.bday-ok { width: auto; padding-inline: 1.6rem; }
.bday-preview { max-width: none; }

@keyframes bday-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bday-pop { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes bday-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ============================================================
   RH — colaboradores, ficha e impressão
   ============================================================ */

/* Cards de resumo (mesmas variáveis do padrão .ch-stat) */
.rh-stat-ativo     { --ch-c: #12a150; --ch-soft: rgba(18,161,80,.12); }
.rh-stat-ferias    { --ch-c: #2563eb; --ch-soft: rgba(37,99,235,.12); }
.rh-stat-afastado  { --ch-c: #d97706; --ch-soft: rgba(217,119,6,.12); }
.rh-stat-desligado { --ch-c: #6b7280; --ch-soft: rgba(107,114,128,.14); }

/* Etiqueta de situação */
.rh-badge {
    display: inline-block; padding: .1rem .5rem; border-radius: 999px;
    font-size: .74rem; font-weight: 700; white-space: nowrap;
}
.rh-ativo     { background: rgba(18,161,80,.14);   color: #0f7a3d; }
.rh-ferias    { background: rgba(37,99,235,.14);   color: #1d4ed8; }
.rh-afastado  { background: rgba(217,119,6,.16);   color: #b45309; }
.rh-desligado { background: rgba(107,114,128,.16); color: #4b5563; }

.rh-sub { font-size: .92rem; font-weight: 700; margin: 1rem 0 .5rem; }
.rh-form .card { margin-bottom: 0; }
.rh-inline-form { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--card-border); }

/* Ficha: coluna lateral + conteúdo */
/* ⚠️⚠️ **`.rh-ficha` distribui as faixas por ORDEM dos filhos, não por classe.**
   `280px 1fr` pressupõe a `.rh-side` como PRIMEIRO filho — é assim na ficha
   (`pessoa_ver`, `meu`), onde a lateral da foto vem antes. Numa tela em que a
   coluna principal venha primeiro, ELA é que recebe os 280px, e o sintoma é o
   conteúdo espremido a ponto de o texto sair uma letra por linha (aconteceu na
   dashboard do RH). **Para duas colunas em ordem qualquer, use o grid de 12
   colunas do projeto** (`.dash-row` + `.col-*`), que diz a proporção na classe
   de cada coluna e não depende da posição. */
.rh-ficha { display: grid; grid-template-columns: 280px 1fr; gap: 1rem; align-items: start; }
.rh-main > .card { margin-bottom: 1rem; }
.rh-side > .card { margin-bottom: 1rem; }
@media (max-width: 900px) { .rh-ficha { grid-template-columns: 1fr; } }

.rh-foto-card { text-align: center; }
.rh-foto {
    width: 150px; height: 150px; object-fit: cover; border-radius: 12px;
    display: block; margin: 0 auto .7rem; background: var(--surface);
}
.rh-foto-vazia {
    display: grid; place-items: center; font-size: 3.4rem; font-weight: 700;
    color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-hover));
}
.rh-foto-form { display: flex; flex-direction: column; gap: .4rem; align-items: center; }
.rh-foto-form input[type="file"] { font-size: .78rem; max-width: 100%; }

/* Pares rótulo/valor */
.rh-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
@media (max-width: 700px) { .rh-campos { grid-template-columns: 1fr; } }
/* ⚠️ `.rh-kv` serve a DUAS formas: rótulo curto + valor (a ficha) e nome longo
   + data (as pendências da dashboard). A versão anterior só servia à primeira
   — o rótulo era `flex: 0 0 auto` e nunca encolhia, então um nome comprido
   consumia a linha e o valor ficava com ~0px.
   ⚠️⚠️ E era `word-break: break-word` que transformava "não coube" em UMA
   LETRA POR LINHA: ele derruba o mínimo do elemento para um caractere. Sem
   ele (e sem `min-width: 0`), o piso de cada lado é a PALAVRA mais longa —
   "30/05/2012" não pode ser espremido, e os dois lados encolhem juntos até
   quebrar em espaços, que é como texto deve quebrar.
   `overflow-wrap: break-word` fica para o token monstruoso (um e-mail longo):
   ele quebra a palavra quando ela sozinha não cabe, sem mexer no piso. */
.rh-kv {
    display: flex; justify-content: space-between; align-items: baseline;
    /* ⚠️ `wrap` é o que resolve por construção: quando os dois lados não cabem
       lado a lado, o valor DESCE INTEIRO para a linha de baixo em vez de ser
       espremido. É melhor que espremer em qualquer largura, e dispensa saber
       de antemão qual dos dois é o longo. O `margin-left: auto` do valor o
       mantém à direita mesmo sozinho na segunda linha. */
    flex-wrap: wrap; gap: 0 .8rem; margin: 0;
    padding: .32rem 0; border-bottom: 1px dashed var(--card-border); font-size: .86rem;
}
.rh-kv span { color: var(--muted); }
.rh-kv strong { text-align: right; margin-left: auto; overflow-wrap: break-word; }

/* Histórico */
.rh-timeline { list-style: none; margin: 0; padding: 0; }
.rh-timeline li {
    padding: .45rem 0 .45rem .8rem; border-left: 2px solid var(--card-border);
    margin-left: .3rem; font-size: .85rem;
}
.rh-tl-tipo { font-weight: 700; margin-right: .4rem; }
.rh-tl-meta { display: block; color: var(--muted); font-size: .74rem; }

/* ---------- Ficha para impressão ---------- */
.rh-print { max-width: 900px; margin: 0 auto; padding: 1.5rem; }
.rh-print-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.rh-print-head h1 { margin: 0; font-size: 1.4rem; }
.rh-print-sub { margin: .2rem 0 0; font-weight: 600; }
.rh-print-foto { width: 110px; height: 110px; object-fit: cover; border-radius: 8px; }
.rh-print-acao { display: flex; gap: .5rem; margin: 1rem 0; }
.rh-print-sec { margin-top: 1.2rem; }
.rh-print-sec h2 {
    font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--primary); border-bottom: 1px solid var(--card-border);
    padding-bottom: .25rem; margin: 0 0 .5rem;
}
.rh-print-tab { width: 100%; border-collapse: collapse; font-size: .84rem; }
.rh-print-tab th, .rh-print-tab td { padding: .25rem .4rem; vertical-align: top; text-align: left; }
.rh-print-tab > tr > th, .rh-print-tab > tbody > tr > th { width: 34%; color: var(--muted); font-weight: 600; }
.rh-print-list thead th { border-bottom: 1px solid var(--card-border); font-weight: 700; color: var(--text); width: auto; }
.rh-print-list tbody td { border-bottom: 1px dotted var(--card-border); }
.rh-print-assinaturas { display: flex; gap: 3rem; margin-top: 3rem; font-size: .8rem; text-align: center; }
.rh-print-assinaturas > div { flex: 1 1 0; }
.rh-print-linha { display: block; border-top: 1px solid #333; margin-bottom: .3rem; }
.rh-print-rodape { margin-top: 1.5rem; font-size: .72rem; color: var(--muted); text-align: center; }

/* ---------- Fase 2: férias, ausências e agenda ---------- */

/* Situações das solicitações (badge e card de resumo) */
.rh-st-solicitado { background: rgba(217,119,6,.16);   color: #b45309; }
.rh-st-aprovado   { background: rgba(18,161,80,.14);   color: #0f7a3d; }
.rh-st-reprovado  { background: rgba(192,50,47,.14);   color: #a02824; }
.rh-st-cancelado  { background: rgba(107,114,128,.16); color: #4b5563; }
.rh-st-gozado     { background: rgba(37,99,235,.14);   color: #1d4ed8; }
.rh-stat-solicitado { --ch-c: #d97706; --ch-soft: rgba(217,119,6,.12); }
.rh-stat-aprovado   { --ch-c: #12a150; --ch-soft: rgba(18,161,80,.12); }
.rh-stat-reprovado  { --ch-c: #c0322f; --ch-soft: rgba(192,50,47,.12); }
.rh-stat-cancelado  { --ch-c: #6b7280; --ch-soft: rgba(107,114,128,.14); }
.rh-stat-gozado     { --ch-c: #2563eb; --ch-soft: rgba(37,99,235,.12); }

/* Situações do período aquisitivo */
.rh-per-aberto    { background: rgba(37,99,235,.14);   color: #1d4ed8; }
.rh-per-em_gozo   { background: rgba(13,148,136,.16);  color: #0f766e; }
.rh-per-concluido { background: rgba(18,161,80,.14);   color: #0f7a3d; }
.rh-per-vencido   { background: rgba(192,50,47,.14);   color: #a02824; }

.rh-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .3rem; vertical-align: middle; }
.rh-vencido { color: var(--danger); }

/* Link do documento anexado à solicitação (Meu RH, férias e ausências) */
.rh-anexo {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .12rem .45rem; margin-right: .3rem; border-radius: 999px;
    background: var(--primary-soft); color: var(--primary);
    font-size: .74rem; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.rh-anexo:hover { background: var(--primary); color: #fff; }
.rh-alerta { margin-top: 1rem; border-left: 3px solid #d97706; }

/* Períodos aquisitivos */
.rh-periodo { border: 1px solid var(--card-border); border-radius: 10px; padding: .7rem .8rem; margin-top: .7rem; }
.rh-periodo-head { display: flex; justify-content: space-between; gap: .8rem; flex-wrap: wrap; align-items: baseline; }
.rh-periodo-meta { color: var(--muted); font-size: .82rem; }
.rh-periodo-tab { margin-top: .5rem; }

/* Quem está fora hoje */
.rh-fora { display: flex; flex-wrap: wrap; gap: .5rem; }
.rh-fora-item {
    display: flex; flex-direction: column; gap: .1rem; padding: .4rem .6rem;
    border: 1px solid var(--card-border); border-radius: 8px; text-decoration: none;
    background: var(--surface); font-size: .82rem;
}
.rh-fora-item span { color: var(--muted); font-size: .74rem; }

/* Legenda / filtro de tipos da agenda */
.rh-legenda { display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding-top: .2rem; }
.rh-leg-item { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; cursor: pointer; }
.rh-leg-cor { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* Calendário mensal */
.rh-cal-titulo { font-size: 1.05rem; margin: 0 0 .7rem; }
.rh-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.rh-cal-dow {
    text-align: center; font-size: .72rem; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: .04em; padding-bottom: .2rem;
}
.rh-cal-dia {
    min-height: 96px; border: 1px solid var(--card-border); border-radius: 8px;
    padding: .25rem; background: var(--card); overflow: hidden;
}
.rh-cal-dia.is-vazio { background: transparent; border-color: transparent; }
.rh-cal-dia.is-fds { background: var(--surface); }
.rh-cal-dia.is-hoje { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.rh-cal-num { display: block; font-size: .74rem; font-weight: 700; color: var(--muted); margin-bottom: .15rem; }
.rh-cal-ev {
    display: block; border-left: 3px solid var(--primary); background: var(--surface);
    border-radius: 4px; padding: .1rem .25rem; margin-bottom: 2px; text-decoration: none;
    font-size: .68rem; line-height: 1.25; overflow: hidden;
}
.rh-cal-ev:hover { background: var(--primary-soft); }
.rh-cal-ev-p { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-cal-ev-t { display: block; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-cal-mais { display: block; font-size: .66rem; color: var(--muted); padding-left: .25rem; }
@media (max-width: 760px) {
    .rh-cal { grid-template-columns: repeat(7, 1fr); gap: 2px; }
    .rh-cal-dia { min-height: 62px; padding: .15rem; }
    .rh-cal-ev-t { display: none; }
}

/* ---------- Fase 3: banco de horas ---------- */
.rh-saldo.is-pos { color: #0f7a3d; }
.rh-saldo.is-neg { color: var(--danger); }
.rh-estornado { opacity: .55; }
.rh-estornado strong { text-decoration: line-through; }

/* ---------- Fase 4: dashboard de indicadores ---------- */
.rh-graficos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }
.rh-graficos .card { text-align: center; }
.rh-graficos .rp-legend { text-align: left; }
@media (max-width: 980px) { .rh-graficos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .rh-graficos { grid-template-columns: 1fr; } }

/* Card da foto no formulário de cadastro (coluna da direita) */
.rh-foto-card .field { text-align: left; margin-top: .6rem; }
.rh-foto-card input[type="file"] { font-size: .78rem; max-width: 100%; }

/* Impressão: só o conteúdo da ficha, sem cromo do sistema */
@media print {
    @page { margin: 14mm; }
    body { background: var(--card); }
    .app-footer, .topnav, .topstrip, [data-no-print] { display: none !important; }
    .rh-print { max-width: none; padding: 0; }
    .rh-print-sec, .rh-print-tab tr, .rh-print-assinaturas { break-inside: avoid; page-break-inside: avoid; }
    .rh-print-sec h2 { color: #000; }
    a[href]::after { content: ""; }   /* não imprimir a URL ao lado do link */
}


/* ==========================================================================
   RH → Prova de vida
   ========================================================================== */
/* Linha de quem ainda não tem prova aprovada. Faixa à esquerda + fundo suave:
   o fundo sozinho some no zebrado da tabela. */
.rh-pv-pendente > td { background: #fffaf0; }
.rh-pv-pendente > td:first-child { box-shadow: inset 3px 0 0 #d97706; }

.pv-fila { display: flex; flex-direction: column; gap: 1rem; margin-top: .8rem; }
.pv-item {
    display: flex; gap: 1rem; align-items: flex-start;
    padding: 1rem; background: var(--surface); border-radius: var(--radius);
    border: 1px solid var(--card-border);
}
.pv-foto-link { flex: 0 0 auto; }
.pv-foto {
    width: 132px; height: 176px; object-fit: cover;
    border-radius: 10px; background: var(--card-border); display: block;
}
.pv-dados { flex: 1 1 auto; min-width: 0; }
.pv-nome { margin: 0; font-size: 1rem; }

.pv-audit { display: grid; grid-template-columns: max-content 1fr; gap: .15rem .7rem; margin: .7rem 0 0; font-size: .82rem; }
.pv-audit dt { color: var(--muted); font-weight: 600; }
.pv-audit dd { margin: 0; word-break: break-word; }
/* O User-Agent é longo e não pode empurrar o card — rola no próprio espaço. */
.pv-ua { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; color: var(--muted); }
.pv-acoes { display: flex; gap: .5rem; align-items: center; margin-top: .8rem; }

.pv-canais { list-style: none; margin: .5rem 0 .9rem; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.pv-canal { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.pv-canal-ic { width: 18px; text-align: center; color: #12a150; font-weight: 700; }
.pv-canal.is-off { color: var(--muted); }
.pv-canal.is-off .pv-canal-ic { color: var(--danger); }

/* Histórico na ficha do colaborador. */
.pv-ficha { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .6rem; }
.pv-ficha-item { display: flex; gap: .7rem; align-items: flex-start; }
.pv-ficha-foto {
    width: 84px; height: 112px; object-fit: cover; border-radius: 8px;
    background: var(--surface); border: 1px solid var(--card-border); display: block;
}
.pv-ficha-vazia { display: grid; place-items: center; color: var(--muted); }
.pv-ficha-info { display: flex; flex-direction: column; gap: .2rem; align-items: flex-start; }

/* Estados do modal de envio (confirmar → enviando → resultado). */
.pv-enviando { display: flex; align-items: center; gap: .5rem; padding: 1.2rem 0; font-size: .95rem; color: var(--muted); }
.pv-spin { display: inline-block; animation: pv-girar 1.2s linear infinite; }
@keyframes pv-girar { to { transform: rotate(360deg); } }
.pv-resultado { padding: 1rem 0; font-size: .95rem; line-height: 1.5; }
.pv-resultado.is-ok { color: #12a150; }
.pv-resultado.is-erro { color: var(--danger); }

/* Aviso da obrigatoriedade de contato, no formulário do colaborador. */
.rh-contato-aviso { display: block; padding-top: 1.7rem; line-height: 1.45; }

@media (max-width: 640px) {
    .pv-item { flex-direction: column; }
    .pv-foto { width: 100%; height: auto; max-height: 320px; }
}

/* ==========================================================================
   RH → Equipe NN (cartões) + campos de rede social no Perfil
   ========================================================================== */
.eq-busca { display: flex; gap: .5rem; align-items: center; margin-bottom: .9rem; }
.eq-busca input { flex: 1 1 auto; max-width: 420px; }
.eq-total { margin: 0 0 .8rem; }

.eq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.eq-card {
    background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius);
    padding: 1.4rem 1rem 1.1rem; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: .35rem;
    transition: box-shadow .15s, transform .15s;
}
.eq-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

.eq-avatar {
    width: 86px; height: 86px; border-radius: 50%; object-fit: cover;
    /* Anel claro separando a foto do fundo do cartão, como no modelo. */
    box-shadow: 0 0 0 4px var(--surface);
    margin-bottom: .5rem;
}
.eq-avatar-ini {
    display: grid; place-items: center; font-size: 2rem; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
}
.eq-nome { margin: 0; font-size: 1rem; font-weight: 700; }
.eq-meta { margin: 0; font-size: .82rem; color: var(--muted); word-break: break-word; }
/* Linha própria, acima do e-mail. `white-space: nowrap` porque "@Financeiro"
   nunca precisa quebrar — quebrar um rótulo curto em duas linhas fica pior
   que deixá-lo sair um pouco do alinhamento. */
.eq-setor { margin: 0; font-size: .82rem; color: var(--muted); white-space: nowrap; }
.eq-email { color: var(--primary); text-decoration: none;font-size: 10px; }
.eq-email:hover { text-decoration: underline; }
.eq-aniver { margin: 0; font-size: .8rem; color: var(--muted); }

.eq-redes { display: flex; gap: .45rem; margin-top: .6rem; }
.eq-rede {
    width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center;
    border: 1px solid var(--card-border); color: var(--muted);
    transition: color .15s, border-color .15s, background .15s;
}
/* Cor da marca só no hover: quatro ícones coloridos de saída competiriam com
   o nome, que é o conteúdo principal do cartão. */
.eq-rede:hover { background: var(--surface); }
.eq-rede-x:hover         { color: #000;     border-color: #000; }
.eq-rede-facebook:hover  { color: #1877f2; border-color: #1877f2; }
.eq-rede-instagram:hover { color: #e1306c; border-color: #e1306c; }
.eq-rede-linkedin:hover  { color: #0a66c2; border-color: #0a66c2; }
.eq-sem-redes { margin: .6rem 0 0; font-size: .74rem; color: var(--muted); opacity: .7; }

/* Rótulo com o ícone da rede, no formulário do Perfil. */
.pf-social-label { display: flex; align-items: center; gap: .35rem; }
.pf-social-ic { display: inline-flex; }
.pf-social-x         { color: #000; }
.pf-social-facebook  { color: #1877f2; }
.pf-social-instagram { color: #e1306c; }
.pf-social-linkedin  { color: #0a66c2; }

/* ==========================================================================
   Perfil → Notificações no navegador (Web Push)
   ========================================================================== */
/* A explicação de onde funciona com o navegador fechado é longa e só interessa
   a quem tem dúvida — fica recolhida para não empurrar o botão para baixo. */
.wp-ajuda { margin-top: .7rem; font-size: .84rem; }
.wp-ajuda > summary { cursor: pointer; color: var(--muted); }
.wp-ajuda > summary:hover { color: var(--primary); }
.wp-ajuda ul { margin: .5rem 0 0; padding-left: 1.1rem; color: var(--muted); line-height: 1.6; }
.wp-ajuda li { margin-bottom: .35rem; }

/* ==========================================================================
   Tarefas (módulo pessoal + pop-up de alerta)
   ========================================================================== */
/* Linha de tarefa vencida: a faixa vermelha à esquerda é mais rápida de achar
   na varredura da tabela do que o badge no meio da linha. */
.tf-vencida > td:first-child { box-shadow: inset 3px 0 0 var(--danger); }

/* Coluna de filtros (col-3): campos empilhados, um por linha — é o formato
   natural numa coluna estreita. */
.tf-filtros .field { margin-bottom: .7rem; }
.tf-filtros .field:last-of-type { margin-bottom: .9rem; }
.tf-filtros input, .tf-filtros select { width: 100%; }
.tf-filtros-acoes { display: flex; gap: .5rem; align-items: center; }

.tf-check { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .5rem; }
.tf-item { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; background: var(--surface); border-radius: 8px; }
.tf-item-txt { flex: 1 1 auto; font-size: .9rem; }
.tf-item.is-done .tf-item-txt { text-decoration: line-through; color: var(--muted); }
.tf-add { display: flex; gap: .5rem; align-items: center; }
.tf-add input { flex: 1 1 auto; }

.tf-alerta-item { padding: .5rem .6rem; margin-bottom: .4rem; background: var(--surface); border-left: 3px solid #d97706; border-radius: 8px; }
.tf-alerta-item strong { display: block; }


/* ==========================================================================
   Utilitários (u-*) — substituem os antigos atributos style="" das views.
   Existem porque a CSP perdeu o style-src 'unsafe-inline': atributo style
   inline deixou de ser permitido. Cada regra é a tradução literal do que
   estava no atributo, nada foi "melhorado" no caminho.
   O seletor é duplicado (.x.x) de propósito: o atributo inline vencia
   qualquer folha de estilo, e sem isso regras como `.crm-filter .btn`
   passariam a ganhar do utilitário e o layout mudaria.
   NÃO escreva style="" em view nova — crie ou reuse um utilitário aqui.
   ========================================================================== */
.u-w-auto.u-w-auto { width:auto; }
.u-w-auto_td-none.u-w-auto_td-none { width:auto; text-decoration:none; }
.u-mt-0.u-mt-0 { margin-top:0; }
.u-d-inline.u-d-inline { display:inline; }
.u-mt-1rem.u-mt-1rem { margin-top:1rem; }
.u-m-0.u-m-0 { margin:0; }
.u-w-auto_td-none_ta-center.u-w-auto_td-none_ta-center { width:auto; text-decoration:none; text-align:center; }
.u-d-flex_gap-d5rem_ai-flex-end.u-d-flex_gap-d5rem_ai-flex-end { display:flex; gap:.5rem; align-items:flex-end; }
.u-minh-auto_ff-inherit_fs-d95rem.u-minh-auto_ff-inherit_fs-d95rem { min-height:auto; font-family:inherit; font-size:.95rem; }
.u-p-0_mt-1rem.u-p-0_mt-1rem { padding:0; margin-top:1rem; }
.u-d-flex_gap-d5rem_ai-center.u-d-flex_gap-d5rem_ai-center { display:flex; gap:.5rem; align-items:center; }
.u-p-0.u-p-0 { padding:0; }
.u-mb-1rem.u-mb-1rem { margin-bottom:1rem; }
.u-d-block_fs-d72rem.u-d-block_fs-d72rem { display:block; font-size:.72rem; }
.u-m-0-0-d5rem.u-m-0-0-d5rem { margin:0 0 .5rem; }
.u-td-none.u-td-none { text-decoration:none; }
.u-d-none.u-d-none { display:none; }
.u-flex-2.u-flex-2 { flex:2; }
.u-jc-flex-start.u-jc-flex-start { justify-content:flex-start; }
.u-c-var--success.u-c-var--success { color:var(--success); }
.u-c-var--danger.u-c-var--danger { color:var(--danger); }
.u-d-flex_ai-center_gap-d6rem.u-d-flex_ai-center_gap-d6rem { display:flex; align-items:center; gap:.6rem; }
.u-d-flex_gap-d5rem_fwrap-wrap.u-d-flex_gap-d5rem_fwrap-wrap { display:flex; gap:.5rem; flex-wrap:wrap; }
.u-flex-1_m-0.u-flex-1_m-0 { flex:1; margin:0; }
.u-ml-d4rem.u-ml-d4rem { margin-left:.4rem; }
.u-maxw-520px.u-maxw-520px { max-width:520px; }
.u-ws-nowrap.u-ws-nowrap { white-space:nowrap; }
.u-w-auto_as-flex-end.u-w-auto_as-flex-end { width:auto; align-self:flex-end; }
.u-ai-start.u-ai-start { align-items:start; }
.u-d-flex_gap-d5rem.u-d-flex_gap-d5rem { display:flex; gap:.5rem; }
.u-mb-d6rem.u-mb-d6rem { margin-bottom:.6rem; }
.u-mt-d4rem.u-mt-d4rem { margin-top:-.4rem; }
.u-mt-d6rem.u-mt-d6rem { margin-top:.6rem; }
.u-mt-1d4rem.u-mt-1d4rem { margin-top:1.4rem; }
.u-m-d2rem-0-1rem.u-m-d2rem-0-1rem { margin:.2rem 0 1rem; }
.u-m-0-0-d8rem.u-m-0-0-d8rem { margin:0 0 .8rem; }
.u-ai-start_gap-1d5rem.u-ai-start_gap-1d5rem { align-items:start; gap:1.5rem; }
.u-c-inherit_td-underline.u-c-inherit_td-underline { color:inherit; text-decoration:underline; }
.u-cur-pointer.u-cur-pointer { cursor:pointer; }
.u-d-flex_gap-1rem_fwrap-wrap_m-d2rem-0-d7rem.u-d-flex_gap-1rem_fwrap-wrap_m-d2rem-0-d7rem { display:flex; gap:1rem; flex-wrap:wrap; margin:.2rem 0 .7rem; }
.u-ff-inherit_fs-d95rem.u-ff-inherit_fs-d95rem { font-family:inherit; font-size:.95rem; }
.u-fs-d8rem.u-fs-d8rem { font-size:.8rem; }
.u-fs-1d05rem.u-fs-1d05rem { font-size:1.05rem; }
.u-fs-1d3rem.u-fs-1d3rem { font-size:1.3rem; }
.u-gridco-span-2.u-gridco-span-2 { grid-column:span 2; }
.u-mt-d4rem2.u-mt-d4rem2 { margin-top:.4rem; }
.u-mt-d8rem.u-mt-d8rem { margin-top:.8rem; }
.u-mt-0_fs-1d05rem.u-mt-0_fs-1d05rem { margin-top:0; font-size:1.05rem; }
.u-m-d2rem-0.u-m-d2rem-0 { margin:.2rem 0; }
.u-m-0-0-d5rem_fs-1d15rem.u-m-0-0-d5rem_fs-1d15rem { margin:0 0 .5rem; font-size:1.15rem; }
.u-m-0-0-d6rem.u-m-0-0-d6rem { margin:0 0 .6rem; }
.u-m-0_p-1rem.u-m-0_p-1rem { margin:0; padding:1rem; }
.u-maxw-120px.u-maxw-120px { max-width:120px; }
.u-maxw-140px.u-maxw-140px { max-width:140px; }
.u-maxw-440px.u-maxw-440px { max-width:440px; }
.u-maxw-460px.u-maxw-460px { max-width:460px; }
.u-maxw-640px.u-maxw-640px { max-width:640px; }
.u-w-auto_mt-d6rem.u-w-auto_mt-d6rem { width:auto; margin-top:.6rem; }
.u-w-auto_td-none_d-inline-block.u-w-auto_td-none_d-inline-block { width:auto; text-decoration:none; display:inline-block; }
.u-ai-start_gap-1d2rem.u-ai-start_gap-1d2rem { align-items:start; gap:1.2rem; }
.u-ai-start_gap-1rem_mt-1rem.u-ai-start_gap-1rem_mt-1rem { align-items:start; gap:1rem; margin-top:1rem; }
.u-as-center.u-as-center { align-self:center; }
.u-as-flex-end.u-as-flex-end { align-self:flex-end; }
.u-as-flex-end_mb-d6rem.u-as-flex-end_mb-d6rem { align-self:flex-end; margin-bottom:.6rem; }
.u-c-var--muted.u-c-var--muted { color:var(--muted); }
.u-c-var--muted_m-0.u-c-var--muted_m-0 { color:var(--muted); margin:0; }
.u-c-var--muted_m-0-0-1rem.u-c-var--muted_m-0-0-1rem { color:var(--muted); margin:0 0 1rem; }
.u-cur-default.u-cur-default { cursor:default; }
.u-d-block_fs-d75rem.u-d-block_fs-d75rem { display:block; font-size:.75rem; }
.u-d-block_ta-center_td-none.u-d-block_ta-center_td-none { display:block; text-align:center; text-decoration:none; }
.u-d-flex_ai-center_gap-d5rem.u-d-flex_ai-center_gap-d5rem { display:flex; align-items:center; gap:.5rem; }
.u-d-flex_ai-center_jc-center_gap-1rem_mt-1rem.u-d-flex_ai-center_jc-center_gap-1rem_mt-1rem { display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:1rem; }
.u-d-flex_gap-d4rem.u-d-flex_gap-d4rem { display:flex; gap:.4rem; }
.u-d-flex_gap-d5rem_ai-center_fwrap-wrap.u-d-flex_gap-d5rem_ai-center_fwrap-wrap { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.u-d-flex_gap-d5rem_mt-d5rem.u-d-flex_gap-d5rem_mt-d5rem { display:flex; gap:.5rem; margin-top:.5rem; }
.u-d-flex_gap-d6rem_ai-flex-end_fwrap-wrap.u-d-flex_gap-d6rem_ai-flex-end_fwrap-wrap { display:flex; gap:.6rem; align-items:flex-end; flex-wrap:wrap; }
.u-d-flex_gap-1d2rem_fwrap-wrap.u-d-flex_gap-1d2rem_fwrap-wrap { display:flex; gap:1.2rem; flex-wrap:wrap; }
.u-d-flex_gap-1rem_fwrap-wrap_m-d2rem-0-d6rem.u-d-flex_gap-1rem_fwrap-wrap_m-d2rem-0-d6rem { display:flex; gap:1rem; flex-wrap:wrap; margin:.2rem 0 .6rem; }
.u-d-flex_jc-space-between_ai-center_gap-2.u-d-flex_jc-space-between_ai-center_gap-2 { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.u-d-inline-block.u-d-inline-block { display:inline-block; }
.u-d-inline-flex_gap-d35rem_fwrap-wrap_ai2.u-d-inline-flex_gap-d35rem_fwrap-wrap_ai2 { display:inline-flex; gap:.35rem; flex-wrap:wrap; align-items:center; justify-content:flex-end; }
.u-d-inline-flex_gap-d35rem_fwrap-wrap_jc2.u-d-inline-flex_gap-d35rem_fwrap-wrap_jc2 { display:inline-flex; gap:.35rem; flex-wrap:wrap; justify-content:flex-end; }
.u-flex-1.u-flex-1 { flex:1; }
.u-fs-d82rem.u-fs-d82rem { font-size:.82rem; }
.u-fs-1d1rem.u-fs-1d1rem { font-size:1.1rem; }
.u-fw-400.u-fw-400 { font-weight:400; }
.u-fw-600.u-fw-600 { font-weight:600; }
.u-gtc-340px-1fr_ai-start_mt-1rem.u-gtc-340px-1fr_ai-start_mt-1rem { grid-template-columns:340px 1fr; align-items:start; margin-top:1rem; }
.u-jc-flex-start_gap-d6rem.u-jc-flex-start_gap-d6rem { justify-content:flex-start; gap:.6rem; }
.u-jc-flex-start_mt-1rem.u-jc-flex-start_mt-1rem { justify-content:flex-start; margin-top:1rem; }
.u-mb-d4rem.u-mb-d4rem { margin-bottom:.4rem; }
.u-ml-d5rem.u-ml-d5rem { margin-left:.5rem; }
.u-ml-d5rem_c-var--muted.u-ml-d5rem_c-var--muted { margin-left:.5rem; color:var(--muted); }
.u-mt-d2rem.u-mt-d2rem { margin-top:-.2rem; }
.u-mt-d6rem2.u-mt-d6rem2 { margin-top:-.6rem; }
.u-mt-d75rem.u-mt-d75rem { margin-top:.75rem; }
.u-mt-1d6rem.u-mt-1d6rem { margin-top:1.6rem; }
.u-mt-1rem_d-flex_gap-d5rem.u-mt-1rem_d-flex_gap-d5rem { margin-top:1rem; display:flex; gap:.5rem; }
.u-mt-1rem_p-0.u-mt-1rem_p-0 { margin-top:1rem; padding:0; }
.u-m-d2rem-0-0.u-m-d2rem-0-0 { margin:-.2rem 0 0; }
.u-m-d15rem-0-0.u-m-d15rem-0-0 { margin:.15rem 0 0; }
.u-m-d25rem-0-0.u-m-d25rem-0-0 { margin:.25rem 0 0; }
.u-m-d2rem-0-d4rem.u-m-d2rem-0-d4rem { margin:.2rem 0 .4rem; }
.u-m-d2rem-0-d6rem.u-m-d2rem-0-d6rem { margin:.2rem 0 .6rem; }
.u-m-d2rem-0-d7rem.u-m-d2rem-0-d7rem { margin:.2rem 0 .7rem; }
.u-m-d35rem-0-0.u-m-d35rem-0-0 { margin:.35rem 0 0; }
.u-m-d3rem-0.u-m-d3rem-0 { margin:.3rem 0; }
.u-m-d5rem-0-0.u-m-d5rem-0-0 { margin:.5rem 0 0; }
.u-m-d75rem-0-d25rem.u-m-d75rem-0-d25rem { margin:.75rem 0 .25rem; }
.u-m-d9rem-0-0_fw-600.u-m-d9rem-0-0_fw-600 { margin:.9rem 0 0; font-weight:600; }
.u-m-0-0-d3rem.u-m-0-0-d3rem { margin:0 0 .3rem; }
.u-m-0-0-d4rem_fs-1rem.u-m-0-0-d4rem_fs-1rem { margin:0 0 .4rem; font-size:1rem; }
.u-m-0-0-d5rem_fs-1rem.u-m-0-0-d5rem_fs-1rem { margin:0 0 .5rem; font-size:1rem; }
.u-m-0-0-d6rem_fs-1rem.u-m-0-0-d6rem_fs-1rem { margin:0 0 .6rem; font-size:1rem; }
.u-m-0-0-d75rem.u-m-0-0-d75rem { margin:0 0 .75rem; }
.u-m-0-0-d7rem.u-m-0-0-d7rem { margin:0 0 .7rem; }
.u-m-0_fs-1d05rem.u-m-0_fs-1d05rem { margin:0; font-size:1.05rem; }
.u-m-0_fs-1rem.u-m-0_fs-1rem { margin:0; font-size:1rem; }
.u-m-0_pl-1d2rem_lh-1d8.u-m-0_pl-1d2rem_lh-1d8 { margin:0; padding-left:1.2rem; line-height:1.8; }
.u-m-1rem-0.u-m-1rem-0 { margin:1rem 0; }
.u-m-1rem-0-d25rem.u-m-1rem-0-d25rem { margin:1rem 0 .25rem; }
.u-m-auto.u-m-auto { margin:auto; }
/* Empurra o vizinho para a direita num flex (usado na barra do side-panel,
   para a porcentagem do upload ficar à esquerda dos botões). */
.u-mr-auto.u-mr-auto { margin-right:auto; }
.u-maxh-none.u-maxh-none { max-height:none; }
.u-maxw-220px.u-maxw-220px { max-width:220px; }
.u-maxw-260px.u-maxw-260px { max-width:260px; }
.u-maxw-340px_ta-center.u-maxw-340px_ta-center { max-width:340px; text-align:center; }
.u-maxw-380px.u-maxw-380px { max-width:380px; }
.u-maxw-480px.u-maxw-480px { max-width:480px; }
.u-maxw-560px.u-maxw-560px { max-width:560px; }
.u-maxw-760px.u-maxw-760px { max-width:760px; }
.u-maxw-760px_mb-1rem.u-maxw-760px_mb-1rem { max-width:760px; margin-bottom:1rem; }
.u-maxw-760px_m-d75rem-0-1rem.u-maxw-760px_m-d75rem-0-1rem { max-width:760px; margin:.75rem 0 1rem; }
.u-maxw-80px.u-maxw-80px { max-width:80px; }
.u-p-1rem-1d25rem.u-p-1rem-1d25rem { padding:1rem 1.25rem; }
.u-p-0-1rem.u-p-0-1rem { padding:0 1rem; }
.u-td-underline.u-td-underline { text-decoration:underline; }
.u-w-100pc.u-w-100pc { width:100%; }
.u-w-120px.u-w-120px { width:120px; }
.u-w-38px.u-w-38px { width:38px; }
.u-w-auto_d-inline-block_td-none.u-w-auto_d-inline-block_td-none { width:auto; display:inline-block; text-decoration:none; }
.u-w-auto_mr-auto_d-none.u-w-auto_mr-auto_d-none { width:auto; margin-right:auto; display:none; }
.u-w-auto_mt-1rem.u-w-auto_mt-1rem { width:auto; margin-top:1rem; }
.u-w-auto_p-d4rem-d7rem_fs-d8rem.u-w-auto_p-d4rem-d7rem_fs-d8rem { width:auto; padding:.4rem .7rem; font-size:.8rem; }

/* Usadas so por JS (mesma origem: eram style="" no HTML gerado). */
.u-m-d2rem-0.u-m-d2rem-0 { margin:.2rem 0; }
.u-m-d4rem-0-0.u-m-d4rem-0-0 { margin:.4rem 0 0; }

/* Cores da fonte no chat. Espelham App\Core\ChatHtml::CORES pelo INDICE —
   mexeu la, mexa aqui. Sao classes (e nao style="color:") porque a CSP nao
   tem mais style-src 'unsafe-inline'. */
.im-cor-0 { color: #2b1f1f; }   /* Padrão */
.im-cor-1 { color: #c0322f; }   /* Vermelho */
.im-cor-2 { color: #d97706; }   /* Laranja */
.im-cor-3 { color: #12a150; }   /* Verde */
.im-cor-4 { color: #2563eb; }   /* Azul */
.im-cor-5 { color: #7c3aed; }   /* Roxo */
.im-cor-6 { color: #6b7280; }   /* Cinza */

/* Alinhamento dos conteudos da dashboard (HtmlSanitizer). Eram style="text-align:",
   que a CSP deixou de aplicar. */
.ct-al-left { text-align: left; }
.ct-al-right { text-align: right; }
.ct-al-center { text-align: center; }
.ct-al-justify { text-align: justify; }

/* ==========================================================================
   Pop-up obrigatório da data de nascimento (partials/nascimento.php).
   Sem backdrop clicável e sem X de propósito: a única saída é gravar.
   Fica acima do pop-up de aniversário e do MKT (z-index 1000) porque
   bloqueia o uso do sistema — tem de vir na frente de tudo.
   ========================================================================== */
.nasc-modal {
    position: fixed; inset: 0; z-index: 1200;
    display: flex; align-items: center; justify-content: center; padding: 1rem;
    background: rgba(20, 12, 12, .72);
    backdrop-filter: blur(3px);
    animation: bday-fade .2s ease-out;
}
.nasc-box {
    position: relative; width: 100%; max-width: 420px; text-align: center;
    padding: 2rem 1.6rem 1.6rem;
    background: var(--card); border: 1px solid var(--card-border);
    border-top: 6px solid var(--primary); border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .32);
    animation: bday-pop .25s cubic-bezier(.2, 1.1, .4, 1);
}
.nasc-ico { font-size: 2.8rem; line-height: 1; margin-bottom: .5rem; }
.nasc-titulo { margin: 0 0 .5rem; font-size: 1.3rem; color: var(--primary); }
.nasc-msg { margin: 0 0 1.3rem; font-size: .95rem; line-height: 1.6; color: var(--muted); }
.nasc-box .field { text-align: left; margin-bottom: .9rem; }
.nasc-box .btn { width: 100%; }
.nasc-box .alert { margin-bottom: .9rem; text-align: left; }

/* Trava a rolagem do que está atrás enquanto o pop-up estiver aberto. */
body.nasc-travado { overflow: hidden; }

/* ==========================================================================
   Picker — select com busca interna (picker.js).
   Reusa a lista do autocomplete (.ac-list/.ac-item) para ficar igual ao
   resto do sistema.
   ========================================================================== */
.pick { position: relative; }
.pick [data-pick-list] { max-height: 200px; }
/* Linha "＋ Cadastrar …" fixa no fim da lista, destacada do resultado. */
.ac-item.ac-novo {
    border-top: 1px solid var(--card-border);
    color: var(--primary);
    font-weight: 600;
}
.ac-item.ac-novo:hover { background: var(--primary-soft); }

/* Cadastro rápido abre POR CIMA do modal da oportunidade (que é z-index 100). */
#modal-nova-empresa, #modal-novo-contato { z-index: 140; }

.u-maxw-260px.u-maxw-260px { max-width: 260px; }

/* Botão com ícone + texto (ex.: lixeira do Excluir no CRM). */
.btn-ico { display: inline-flex; align-items: center; gap: .35rem; }
.btn-ico .ico-lixeira { flex: none; }

/* Confirmação destrutiva: vermelho SÓLIDO. Só `.btn-danger` não serve aqui —
   ele troca a cor do TEXTO, e sobre o fundo escuro do .btn ficaria ilegível. */
.btn.btn-solido-danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}
.btn.btn-solido-danger:hover { background: #a32c26; border-color: #a32c26; color: #fff; }
/* No escuro o --danger é clareado (#e2645c) e o branco sobre ele mede 3,38:1
   — reprova. Tinta escura: 5,26:1 (6,44:1 no hover). Vale para os três
   modais que usam a classe (lixeira do CRM, excluir com motivo, usuários). */
body.tema-escuro .btn.btn-solido-danger { color: #2a1010; }
body.tema-escuro .btn.btn-solido-danger:hover { background: #ec7a73; border-color: #ec7a73; color: #2a1010; }

/* Acima do modal do card (z-index 100): ele continua aberto atrás. */
#modal-excluir-motivo { z-index: 140; }

/* Formulário de anexo da oportunidade (aba Arquivos). */
.op-arq-form {
    padding: 1rem;
    margin-bottom: 1rem;
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
}
.op-arq-form .field { margin-bottom: .7rem; }
/* Observação do anexo: fechada por padrão para a lista não crescer, e o
   marcador padrão do <details> sai porque o próprio 👁 já é a affordance. */
.arq-obs { margin-top: .25rem; }
.arq-obs > summary { cursor: pointer; font-size: .78rem; color: var(--muted); list-style: none; display: inline-flex; align-items: center; gap: .2rem; }
.arq-obs > summary::-webkit-details-marker { display: none; }
.arq-obs > summary:hover { color: var(--primary); }
.arq-obs > p { margin: .3rem 0 0; padding: .4rem .6rem; font-size: .84rem; line-height: 1.45; background: var(--surface); border-left: 3px solid var(--card-border); border-radius: 8px; white-space: normal; }

/* Linha de inclusão de produto/serviço na oportunidade. */
.op-prod-grid {
    display: grid;
    grid-template-columns: 1fr 90px 150px auto;
    gap: .6rem;
    align-items: end;
}
.op-prod-grid .field { margin-bottom: 0; }
.op-prod-total td { border-top: 2px solid var(--card-border); font-size: 1.02rem; }
@media (max-width: 760px) {
    .op-prod-grid { grid-template-columns: 1fr 1fr; }
}

/* Catálogo de produtos/serviços (Configurações do CRM). */
.pr-grid {
    display: grid;
    grid-template-columns: 1fr 160px 160px;
    gap: .6rem;
    align-items: end;
}
.pr-grid .field { margin-bottom: 0; }
.pr-form .field { margin-bottom: .7rem; }
/* Inativo continua legível, só recuado — some do select, não da lista. */
.pr-inativo td { opacity: .62; }
/* `.badge` já é verde por padrão (ativo); esta é a variante neutra. */
.badge.badge-off { color: var(--muted); background: rgba(107, 114, 128, .14); }
@media (max-width: 760px) {
    .pr-grid { grid-template-columns: 1fr; }
}

/* Paginação de lista (partials/paginacao.php). */
.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

/* Pagers do histórico de boletos. O card tem padding 0 (a tabela encosta nas
   bordas), então o respiro vem daqui. */
.bo-pager { padding: 0 1rem .9rem; }
.bo-pager-topo {
    padding: .2rem 1rem .9rem;
    border-bottom: 1px solid var(--card-border);
    margin-bottom: .2rem;
}
/* O .pager já traz margin-top; dentro do card ela sobra. */
.bo-pager .pager, .bo-pager-topo .pager { margin-top: .6rem; }

/* ==========================================================================
   Operations Center (public_noc) — selo, cartões de estado e listas.
   O topo reusa .topstrip/.topbar/.topnav do sistema interno (partials/noc-nav),
   então aqui só entra o que é exclusivo deste portal.
   ========================================================================== */

/* Selo na faixa branca: identifica o portal e sinaliza "monitorando agora". */
.noc-tag {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .3rem .7rem; border-radius: 999px;
    background: var(--primary-soft); color: var(--primary);
    font-size: .78rem; font-weight: 700; letter-spacing: .02em;
    white-space: nowrap;
}
.noc-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--success); box-shadow: 0 0 0 0 rgba(18, 161, 80, .6);
    animation: noc-pulse 2s infinite;
}
@keyframes noc-pulse {
    70%  { box-shadow: 0 0 0 8px rgba(18, 161, 80, 0); }
    100% { box-shadow: 0 0 0 0 rgba(18, 161, 80, 0); }
}
@media (max-width: 700px) { .noc-tag { display: none; } }

/* Cartões de estado: o valor grande é o que se lê de longe. */
.noc-cards {
    display: grid; gap: 1rem; margin-top: .4rem;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.noc-card {
    background: var(--card); border: 1px solid var(--card-border);
    border-left: 5px solid var(--muted);
    border-radius: var(--radius); padding: .9rem 1rem;
    display: flex; flex-direction: column; gap: .15rem;
}
.noc-card-lb { font-size: .78rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.noc-card-vl { font-size: 1.9rem; line-height: 1.1; }
.noc-card-nt { font-size: .78rem; color: var(--muted); }
/* Semáforo — a cor está na BORDA, não no fundo: o número continua legível. */
.noc-ok      { border-left-color: var(--success); }
.noc-atencao { border-left-color: #d97706; }
.noc-grave   { border-left-color: var(--danger); }
.noc-grave .noc-card-vl { color: var(--danger); }

.noc-lista { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .9rem; }
.noc-lista li { margin-bottom: .35rem; }
.noc-lista-log {
    list-style: none; padding-left: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem; max-height: 320px; overflow-y: auto;
}
.noc-lista-log li {
    padding: .45rem .6rem; margin-bottom: .4rem;
    background: var(--surface); border-left: 3px solid var(--danger); border-radius: 6px;
    word-break: break-word;
}
/* Marca do portal nas telas de login (auth.css não conhece o NOC). */
.noc-brand { letter-spacing: .01em; }
/* O nome no topo do NOC continua visível no celular: aqui não há menu longo
   disputando espaço, ao contrário do sistema interno. */
@media (max-width: 640px) {
    .noc-username.noc-username { display: inline; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ==========================================================================
   NOC → Domínios
   ========================================================================== */
/* Variantes do .badge (que por padrão é verde/sucesso). */
/* Backoffice → Notificação. A senha fica atrás de um <details> nativo: some da
   tela de quem passa por trás, e revelar não custa uma linha de JS (a CSP
   barra handler inline de qualquer forma). */
.nt-inativo { opacity: .55; }
.nt-senha > summary { cursor: pointer; font-size: .82rem; color: var(--muted); list-style: none; }
.nt-senha > summary::-webkit-details-marker { display: none; }
.nt-senha > summary:hover { color: var(--primary); }
.nt-senha-txt { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86rem; user-select: all; margin-right: .3rem; }

/* ⚠️ A tinta sai da família `--alert-*-ink` (uma por MODO), nunca de um hex
   fixo: o fundo é translúcido, então ele acompanha o tema e o texto tinha de
   acompanhar junto. Medido sobre `--card`: `#b45309` no escuro dava 2,81:1 e
   `#12a150` (o `.badge-ok`) dava 2,87:1 no CLARO — os dois ilegíveis, cada um
   no seu modo. Não existe um hex que passe nos dois; é para isso que a família
   de tokens existe. */
.badge.badge-erro   { color: var(--alert-error-ink); background: var(--danger-soft); }
.badge.badge-alerta { color: var(--alert-warn-ink); background: rgba(217, 119, 6, .14); }

/* Saída de comando: monoespaçada, rolável e com quebra — o certbot é verboso
   e a linha longa não pode estourar o modal. */
.dom-saida {
    margin: 0;
    padding: .7rem .85rem;
    background: #1b1414;
    color: #e8e0e0;
    border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .76rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 140px;
    overflow: auto;
}
.dom-saida-alta { max-height: 320px; }

.u-fs-d78rem.u-fs-d78rem { font-size: .78rem; }

/* ==========================================================================
   NOC → ADM → Biometria — atalhos por porta acima da lista.
   ========================================================================== */
.bio-portas {
    display: flex; flex-wrap: wrap; gap: .5rem;
    margin: .2rem 0 1rem;
}
.bio-porta {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .45rem .8rem; border-radius: 999px;
    background: var(--card); border: 1px solid var(--card-border);
    color: var(--text); text-decoration: none; font-size: .86rem;
    transition: border-color .15s, background .15s;
}
.bio-porta:hover { border-color: var(--primary); background: var(--primary-soft); }
/* A porta filtrada fica marcada — sem isso não se sabe o que a lista mostra. */
.bio-porta.is-sel { background: var(--primary); border-color: var(--primary); color: #fff; }
.bio-porta.is-sel .bio-porta-n { background: rgba(255, 255, 255, .25); color: #fff; }
.bio-porta-nome { font-weight: 600; }
.bio-porta-n {
    min-width: 1.5rem; text-align: center;
    padding: .05rem .4rem; border-radius: 999px;
    background: var(--surface); color: var(--muted); font-size: .78rem; font-weight: 700;
}
.bio-porta-limpar { color: var(--muted); }

/* ==========================================================================
   Chamados — agrupamento de duplicados.
   ========================================================================== */
.ch-agrup-aviso { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.ch-agrup-item {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .2rem .6rem; border-radius: 999px;
    background: var(--card); border: 1px solid var(--card-border);
    text-decoration: none; color: var(--text); font-size: .84rem;
}
.ch-agrup-item:hover { border-color: var(--primary); }

/* Lista de candidatos a principal. Rolável: a busca pode trazer 20 itens e o
   modal não pode crescer além da tela. */
.ch-agrup-lista { max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: .4rem; }
.ch-agrup-op {
    display: flex; flex-direction: column; gap: .15rem; text-align: left;
    width: 100%; padding: .6rem .75rem; cursor: pointer;
    background: var(--surface); border: 1px solid var(--card-border);
    border-radius: 8px; font-family: inherit; font-size: .9rem; color: var(--text);
}
.ch-agrup-op:hover { border-color: var(--primary); background: var(--primary-soft); }
.ch-agrup-op-t { line-height: 1.35; }

/* Agrupar em lote pela fila: coluna de seleção, barra de ação e escolha do
   principal (reusa .ch-agrup-lista para a rolagem). */
.ch-col-sel { width: 36px; }
.ch-lote-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1rem;
    padding: .6rem .9rem; border-bottom: 1px solid var(--card-border);
    background: var(--primary-soft);
    border-radius: var(--radius) var(--radius) 0 0;
}
.ch-lote-conta { font-size: .9rem; }
/* Empurra os botões para a direita sobrando espaço, e desce inteiro no celular. */
.ch-lote-acoes { display: flex; gap: .4rem; margin-left: auto; }
.ch-lote-op {
    display: flex; align-items: flex-start; gap: .55rem;
    padding: .6rem .75rem; cursor: pointer;
    background: var(--surface); border: 1px solid var(--card-border);
    border-radius: 8px; font-size: .9rem;
}
.ch-lote-op:hover { border-color: var(--primary); background: var(--primary-soft); }
.ch-lote-op input { margin-top: .2rem; flex: 0 0 auto; }
@media (max-width: 640px) {
    .ch-lote-acoes { margin-left: 0; width: 100%; }
    .ch-lote-acoes .btn, .ch-lote-acoes .btn-ghost { flex: 1; }
}
/* Aviso neutro (agrupamento) — o .alert base não tem essa variante. */
.alert.alert-info {
    color: var(--alert-info-ink);
    background: rgba(37, 99, 235, .10);
    border-color: rgba(37, 99, 235, .25);
}
/* Solicitante do novo chamado: leitura, com a mesma altura de um campo. */
.ch-solicitante {
    margin: 0;
    padding: .6rem .8rem;
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    font-weight: 600;
}

/* ============ Bloco de notas pessoal (mig. 098) ============ */

/* Utilitário de acessibilidade: some da tela, continua para leitor de tela. */
.u-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Mural de cartões. `auto-fill` + minmax: em telas largas cabem 4, no celular
   vira uma coluna, sem media query. */
.nota-grid {
    display: grid; gap: .8rem;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    align-items: start;
}
.nota {
    display: flex; flex-direction: column; gap: .5rem;
    padding: .8rem .9rem; border-radius: var(--radius);
    background: var(--card); border: 1px solid var(--card-border);
    box-shadow: var(--shadow);
}
.nota.is-fixada { border-color: var(--primary); }
.nota-head { display: flex; align-items: flex-start; gap: .5rem; }
.nota-titulo { margin: 0; font-size: .98rem; line-height: 1.3; flex: 1 1 auto; overflow-wrap: anywhere; }
.nota-acao { display: inline; margin: 0; }
.nota-pin {
    border: 0; background: none; cursor: pointer; font-size: .95rem;
    line-height: 1; padding: .1rem; opacity: .35; filter: grayscale(1);
}
.nota-pin:hover { opacity: .8; }
.nota.is-fixada .nota-pin { opacity: 1; filter: none; }
/* Cartão alto vira rolagem própria: uma nota longa não pode esticar a linha
   inteira do grid e empurrar as vizinhas para fora da vista. */
.nota-corpo {
    font-size: .88rem; line-height: 1.5; color: var(--text);
    overflow-wrap: anywhere; max-height: 260px; overflow-y: auto;
}
.nota-pe {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; flex-wrap: wrap; margin-top: auto;
    padding-top: .5rem; border-top: 1px solid var(--card-border);
}
.nota-pe .hint { font-size: .72rem; }
.nota-botoes { display: flex; align-items: center; gap: .3rem; }

/* Cores dos cartões. Índice fixo (Nota::CORES) — o banco guarda o número, e a
   cor mora aqui: valor vindo do banco nunca vira atributo style (CSP). */
/* ⚠️ UMA fonte de verdade por cor: `--nota-cor`. O cartão e a bolha do
   seletor derivam dela, em vez de repetirem hex escritos à mão em dois
   lugares — que é como "escolhi verde e saiu amarelo" acontece. Para trocar
   uma cor, mexa só aqui. */
/* Um seletor por cor, cobrindo o cartão (.nota-cor-N) E a amostra
   (.nota-amostra-N): há um único lugar com o hex. */
.nota-cor-1, .nota-amostra-1 { --nota-cor: #f5d949; }
.nota-cor-2, .nota-amostra-2 { --nota-cor: #62c98a; }
.nota-cor-3, .nota-amostra-3 { --nota-cor: #5aa4e6; }
.nota-cor-4, .nota-amostra-4 { --nota-cor: #ec7fa4; }
.nota-cor-5, .nota-amostra-5 { --nota-cor: #a385e0; }

/* A cor do cartão é a mesma, diluída no fundo — forte o suficiente para se
   reconhecer de relance, clara o suficiente para o texto continuar legível.
   A FAIXA à esquerda usa a cor cheia: é ela que torna a escolha inequívoca
   mesmo em tons pálidos como o amarelo. */
.nota[class*="nota-cor-"]:not(.nota-cor-0) {
    background: color-mix(in srgb, var(--nota-cor) 18%, var(--card));
    border-color: color-mix(in srgb, var(--nota-cor) 45%, var(--card-border));
    border-left: 5px solid var(--nota-cor);
}
/* Navegador sem color-mix cai aqui e ainda mostra a faixa lateral — a cor
   nunca some por completo. */
@supports not (background: color-mix(in srgb, red 10%, white)) {
    .nota[class*="nota-cor-"]:not(.nota-cor-0) { background: var(--card); }
}

.nota-textarea {
    width: 100%; padding: .55rem .65rem; border: 1px solid var(--card-border);
    border-radius: 8px; font-family: inherit; font-size: .92rem;
    line-height: 1.5; resize: vertical; min-height: 180px;
}
/* Seletor de cor: o radio some e a bolha é o alvo do clique. */
.nota-cores { display: flex; gap: .5rem; flex-wrap: wrap; }
.nota-cor-op { cursor: pointer; display: inline-flex; }
.nota-cor-op input { position: absolute; opacity: 0; width: 0; height: 0; }
/* ⚠️ A amostra NÃO herda o fundo do cartão. Aqueles tons são claros de
   propósito (texto por cima precisa ser legível) e, num círculo de 26px,
   ficavam brancos — a escolha de cor virava seis bolhas iguais. A amostra usa
   a versão saturada da mesma família, definida logo abaixo. */
.nota-cor-bolha {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--card); border: 2px solid var(--card-border);
    display: block; transition: transform .1s, border-color .1s;
}
.nota-cor-op:hover .nota-cor-bolha { transform: scale(1.12); }
.nota-cor-op input:checked + .nota-cor-bolha { border-color: var(--primary); transform: scale(1.15); }
/* Foco visível pelo teclado: sem isto a escolha de cor é inalcançável sem mouse. */
.nota-cor-op input:focus-visible + .nota-cor-bolha { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Amostras: mesma família das cores de cartão acima, saturadas o bastante
   para se distinguirem lado a lado. A "Padrão" fica branca, com a borda
   fazendo o contorno. */
/* A bolha pinta a variável definida no bloco único acima — o hex não se
   repete aqui. "Padrão" (índice 0) não define variável e cai no branco. */
.nota-cor-op .nota-cor-bolha { background: var(--nota-cor, var(--card)); }

/* ============ Menu flutuante de atalhos (mig. 099) ============ */

/* Aba Atalhos (Configurações) */
.at-ic { font-size: 1.2rem; }
.at-check { display: flex; align-items: center; gap: .4rem; cursor: pointer; }

/* Sem disco de fundo: os atalhos são círculos brancos com borda e sombra, que
   se sustentam sozinhos sobre a página. Foi o disco que obrigava o botão a
   ficar colado no canto (só ali ele era cortado pelas duas bordas), então sem
   ele o menu volta a ficar elevado, longe da barra do navegador.
   `--fab-meio` continua: é o que ancora a origem do leque no CENTRO do botão. */
.fab {
    /* `bottom` é o PADRÃO — quem arrastou tem o seu valor aplicado pelo
       atalhos.js via CSSOM (a CSP barra o atributo style, não a propriedade). */
    position: fixed; right: 24px; bottom: 110px; z-index: 900;
    --fab-btn: 56px;      /* diâmetro do botão */
    --fab-meio: calc(var(--fab-btn) / 2);   /* centro do botão, a partir do canto */
    touch-action: none;   /* o arrasto no celular não pode rolar a página junto */
}
/* Enquanto arrasta: sem transição (senão o botão "persegue" o dedo com atraso)
   e com o cursor indicando o que está acontecendo. */
.fab.is-dragging .fab-btn { transition: none; cursor: grabbing; }
.fab-btn { cursor: grab; }
/* O leque parte do centro do botão: cada item começa em translate(0,0)
   escondido atrás dele e sai para a sua posição no arco. */
/* Origem do leque também no centro do botão — estava em 6px, 22px fora, e os
   atalhos saíam desalinhados do ponto de onde deveriam brotar. */
.fab-itens {
    position: absolute; right: var(--fab-meio); bottom: var(--fab-meio);
    width: 0; height: 0;
}
.fab-item {
    position: absolute; right: 0; bottom: 0; z-index: 1;
    width: 46px; height: 46px; margin: -23px -23px 0 0;
    display: grid; place-items: center; border-radius: 50%;
    background: var(--card); color: var(--text); text-decoration: none;
    border: 1px solid var(--card-border); box-shadow: var(--shadow);
    font-size: 1.15rem; line-height: 1;
    transform: translate(0, 0) scale(.4);
    opacity: 0; pointer-events: none;
    transition: transform .22s cubic-bezier(.2,.9,.3,1.2), opacity .16s ease;
}
.fab.is-open .fab-item { opacity: 1; pointer-events: auto; }
.fab-item:hover { border-color: var(--primary); color: var(--primary); }
.fab-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Rótulo no hover, à esquerda do ícone (o leque encosta na borda direita). */
.fab-item::after {
    content: attr(data-tip-fab);
    position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%);
    white-space: nowrap; font-size: .74rem; font-weight: 600;
    /* Escuro de novo: sobre a página clara, o rótulo branco de antes (feito
       para o disco vinho) desaparecia. */
    background: #2b1f1f; color: #fff; padding: .2rem .5rem; border-radius: 6px;
    opacity: 0; pointer-events: none; transition: opacity .12s;
}
.fab-item:hover::after, .fab-item:focus-visible::after { opacity: 1; }

.fab-btn {
    /* z-index acima dos itens: é o que fecha o menu, e o atalho que passa
       perto não pode cobri-lo. */
    position: relative; z-index: 2; width: 56px; height: 56px; border-radius: 50%;
    border: 0; cursor: pointer; display: grid; place-items: center;
    background: var(--primary); color: #fff;
    box-shadow: 0 6px 20px rgba(153, 54, 53, .38);
    transition: transform .2s, background .2s;
}
.fab-btn:hover { background: var(--primary-hover); }
/* Aberto, só gira: o X branco sobre o vinho já diz que virou "fechar". A
   inversão para branco existia por causa do disco (a mesma cor do botão) e
   perdeu o motivo junto com ele. */
.fab.is-open .fab-btn { transform: rotate(90deg); }
/* Um botão, dois ícones: trocam pela classe do pai, sem dois elementos para
   manter em sincronia. O X aparece só aberto — é o "fechar" pedido. */
.fab-ic { position: absolute; display: grid; place-items: center; transition: opacity .15s; }
.fab-ic-fechar { opacity: 0; }
.fab.is-open .fab-ic-abrir { opacity: 0; }
.fab.is-open .fab-ic-fechar { opacity: 1; }

/* Véu que escurece a página e fecha ao clicar fora. */
.fab-veu {
    position: fixed; inset: 0; z-index: 899; border: 0; padding: 0;
    /* Sem o disco, é o véu que separa o menu do conteúdo — voltou a ter
       presença, além de capturar o clique fora. */
    background: rgba(20, 12, 12, .28); opacity: 0; pointer-events: none;
    transition: opacity .18s;
}
.fab-veu.is-on { opacity: 1; pointer-events: auto; }

/* Posições do arco — um quarto de círculo subindo do botão até a esquerda.
   Uma classe por TOTAL de itens (`fab-n-N`, posta pelo PHP) e uma por índice:
   posição calculada teria de virar atributo `style`, que a CSP bloqueia, e o
   `InlineCss` exclui posicionamento de propósito.

   ⚠️ O RAIO CRESCE com a quantidade. Com raio fixo, o arco de 90° tem sempre
   ~176px: a partir de 5 itens a distância entre centros cai abaixo dos 46px do
   ícone e eles se sobrepõem. Aqui o raio é o necessário para manter 58px entre
   vizinhos (46 do ícone + 12 de folga): 112px até 4 itens, depois 148, 185,
   222 e 259. Conferido que nenhum par fica a menos de 46px em nenhum total.
   Gerado por script — para mexer, recalcule o conjunto inteiro. */
.fab.is-open .fab-n-1 > .fab-item-1 { transform: translate(-79.2px, -79.2px) scale(1); }
.fab.is-open .fab-n-2 > .fab-item-1 { transform: translate(-112.0px, -0.0px) scale(1); }
.fab.is-open .fab-n-2 > .fab-item-2 { transform: translate(-0.0px, -112.0px) scale(1); }
.fab.is-open .fab-n-3 > .fab-item-1 { transform: translate(-112.0px, -0.0px) scale(1); }
.fab.is-open .fab-n-3 > .fab-item-2 { transform: translate(-79.2px, -79.2px) scale(1); }
.fab.is-open .fab-n-3 > .fab-item-3 { transform: translate(-0.0px, -112.0px) scale(1); }
.fab.is-open .fab-n-4 > .fab-item-1 { transform: translate(-112.0px, -0.0px) scale(1); }
.fab.is-open .fab-n-4 > .fab-item-2 { transform: translate(-97.0px, -56.0px) scale(1); }
.fab.is-open .fab-n-4 > .fab-item-3 { transform: translate(-56.0px, -97.0px) scale(1); }
.fab.is-open .fab-n-4 > .fab-item-4 { transform: translate(-0.0px, -112.0px) scale(1); }
.fab.is-open .fab-n-5 > .fab-item-1 { transform: translate(-148.0px, -0.0px) scale(1); }
.fab.is-open .fab-n-5 > .fab-item-2 { transform: translate(-136.7px, -56.6px) scale(1); }
.fab.is-open .fab-n-5 > .fab-item-3 { transform: translate(-104.7px, -104.7px) scale(1); }
.fab.is-open .fab-n-5 > .fab-item-4 { transform: translate(-56.6px, -136.7px) scale(1); }
.fab.is-open .fab-n-5 > .fab-item-5 { transform: translate(-0.0px, -148.0px) scale(1); }
.fab.is-open .fab-n-6 > .fab-item-1 { transform: translate(-185.0px, -0.0px) scale(1); }
.fab.is-open .fab-n-6 > .fab-item-2 { transform: translate(-175.9px, -57.2px) scale(1); }
.fab.is-open .fab-n-6 > .fab-item-3 { transform: translate(-149.7px, -108.7px) scale(1); }
.fab.is-open .fab-n-6 > .fab-item-4 { transform: translate(-108.7px, -149.7px) scale(1); }
.fab.is-open .fab-n-6 > .fab-item-5 { transform: translate(-57.2px, -175.9px) scale(1); }
.fab.is-open .fab-n-6 > .fab-item-6 { transform: translate(-0.0px, -185.0px) scale(1); }
.fab.is-open .fab-n-7 > .fab-item-1 { transform: translate(-222.0px, -0.0px) scale(1); }
.fab.is-open .fab-n-7 > .fab-item-2 { transform: translate(-214.4px, -57.5px) scale(1); }
.fab.is-open .fab-n-7 > .fab-item-3 { transform: translate(-192.3px, -111.0px) scale(1); }
.fab.is-open .fab-n-7 > .fab-item-4 { transform: translate(-157.0px, -157.0px) scale(1); }
.fab.is-open .fab-n-7 > .fab-item-5 { transform: translate(-111.0px, -192.3px) scale(1); }
.fab.is-open .fab-n-7 > .fab-item-6 { transform: translate(-57.5px, -214.4px) scale(1); }
.fab.is-open .fab-n-7 > .fab-item-7 { transform: translate(-0.0px, -222.0px) scale(1); }
.fab.is-open .fab-n-8 > .fab-item-1 { transform: translate(-259.0px, -0.0px) scale(1); }
.fab.is-open .fab-n-8 > .fab-item-2 { transform: translate(-252.5px, -57.6px) scale(1); }
.fab.is-open .fab-n-8 > .fab-item-3 { transform: translate(-233.4px, -112.4px) scale(1); }
.fab.is-open .fab-n-8 > .fab-item-4 { transform: translate(-202.5px, -161.5px) scale(1); }
.fab.is-open .fab-n-8 > .fab-item-5 { transform: translate(-161.5px, -202.5px) scale(1); }
.fab.is-open .fab-n-8 > .fab-item-6 { transform: translate(-112.4px, -233.4px) scale(1); }
.fab.is-open .fab-n-8 > .fab-item-7 { transform: translate(-57.6px, -252.5px) scale(1); }
.fab.is-open .fab-n-8 > .fab-item-8 { transform: translate(-0.0px, -259.0px) scale(1); }

/* Celular: tela estreita não comporta um arco de 112px — vira coluna,
   subindo em linha reta a partir do botão. */
@media (max-width: 560px) {
    .fab { right: 16px; bottom: 16px; }
    .fab.is-open .fab-n-1 > .fab-item-1 { transform: translate(0, -58px) scale(1); }
    .fab.is-open .fab-n-2 > .fab-item-1 { transform: translate(0, -58px) scale(1); }
    .fab.is-open .fab-n-2 > .fab-item-2 { transform: translate(0, -116px) scale(1); }
    .fab.is-open .fab-n-3 > .fab-item-1 { transform: translate(0, -58px) scale(1); }
    .fab.is-open .fab-n-3 > .fab-item-2 { transform: translate(0, -116px) scale(1); }
    .fab.is-open .fab-n-3 > .fab-item-3 { transform: translate(0, -174px) scale(1); }
    .fab.is-open .fab-n-4 > .fab-item-1 { transform: translate(0, -58px) scale(1); }
    .fab.is-open .fab-n-4 > .fab-item-2 { transform: translate(0, -116px) scale(1); }
    .fab.is-open .fab-n-4 > .fab-item-3 { transform: translate(0, -174px) scale(1); }
    .fab.is-open .fab-n-4 > .fab-item-4 { transform: translate(0, -232px) scale(1); }
    .fab.is-open .fab-n-5 > .fab-item-1 { transform: translate(0, -58px) scale(1); }
    .fab.is-open .fab-n-5 > .fab-item-2 { transform: translate(0, -116px) scale(1); }
    .fab.is-open .fab-n-5 > .fab-item-3 { transform: translate(0, -174px) scale(1); }
    .fab.is-open .fab-n-5 > .fab-item-4 { transform: translate(0, -232px) scale(1); }
    .fab.is-open .fab-n-5 > .fab-item-5 { transform: translate(0, -290px) scale(1); }
    .fab.is-open .fab-n-6 > .fab-item-1 { transform: translate(0, -58px) scale(1); }
    .fab.is-open .fab-n-6 > .fab-item-2 { transform: translate(0, -116px) scale(1); }
    .fab.is-open .fab-n-6 > .fab-item-3 { transform: translate(0, -174px) scale(1); }
    .fab.is-open .fab-n-6 > .fab-item-4 { transform: translate(0, -232px) scale(1); }
    .fab.is-open .fab-n-6 > .fab-item-5 { transform: translate(0, -290px) scale(1); }
    .fab.is-open .fab-n-6 > .fab-item-6 { transform: translate(0, -348px) scale(1); }
    .fab.is-open .fab-n-7 > .fab-item-1 { transform: translate(0, -58px) scale(1); }
    .fab.is-open .fab-n-7 > .fab-item-2 { transform: translate(0, -116px) scale(1); }
    .fab.is-open .fab-n-7 > .fab-item-3 { transform: translate(0, -174px) scale(1); }
    .fab.is-open .fab-n-7 > .fab-item-4 { transform: translate(0, -232px) scale(1); }
    .fab.is-open .fab-n-7 > .fab-item-5 { transform: translate(0, -290px) scale(1); }
    .fab.is-open .fab-n-7 > .fab-item-6 { transform: translate(0, -348px) scale(1); }
    .fab.is-open .fab-n-7 > .fab-item-7 { transform: translate(0, -406px) scale(1); }
    .fab.is-open .fab-n-8 > .fab-item-1 { transform: translate(0, -58px) scale(1); }
    .fab.is-open .fab-n-8 > .fab-item-2 { transform: translate(0, -116px) scale(1); }
    .fab.is-open .fab-n-8 > .fab-item-3 { transform: translate(0, -174px) scale(1); }
    .fab.is-open .fab-n-8 > .fab-item-4 { transform: translate(0, -232px) scale(1); }
    .fab.is-open .fab-n-8 > .fab-item-5 { transform: translate(0, -290px) scale(1); }
    .fab.is-open .fab-n-8 > .fab-item-6 { transform: translate(0, -348px) scale(1); }
    .fab.is-open .fab-n-8 > .fab-item-7 { transform: translate(0, -406px) scale(1); }
    .fab.is-open .fab-n-8 > .fab-item-8 { transform: translate(0, -464px) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .fab-item, .fab-btn, .fab-ic, .fab-veu { transition: none; }
}

/* Aba de engrenagem (Usuários → gerenciar tipos). Vira botão dentro da barra
   de abas, então precisa desfazer o estilo padrão de <button>. */
.ch-tab-cfg {
    border: 0; background: none; cursor: pointer; font-size: 1rem;
    line-height: 1; padding: .45rem .7rem; color: var(--muted);
}
.ch-tab-cfg:hover { color: var(--primary); }

/* Abas de FILTRO dentro do painel de filtros (Sistema → Usuários por tipo,
   ADM → Compras por status). Ficam logo abaixo dos campos: a linha no topo é
   o que separa uma coisa da outra sem precisar de um segundo cartão.
   ⚠️ O nome nasceu `u-tabs-tipos` no Usuários e ficou específico demais; o
   alias `.u-tabs-filtro` é o nome geral, e os dois seletores andam juntos —
   quem usar a classe nova ganha o mesmo estilo. */
.u-tabs-tipos, .u-tabs-filtro {
    margin: .9rem 0 0; padding-top: .9rem;
    border-top: 1px solid var(--card-border);
    align-items: center;
}
/* Pílula em repouso mais clara que o painel, para a aba ativa se destacar por
   contraste e não só por cor. */
.u-tabs-tipos .ch-tab , .u-tabs-filtro .ch-tab { background: var(--card); padding: .42rem .85rem; font-size: .86rem; }
.u-tabs-tipos .ch-tab:hover, .u-tabs-filtro .ch-tab:hover { background: var(--primary-soft); color: var(--primary); }
.u-tabs-tipos .ch-tab.active, .u-tabs-filtro .ch-tab.active { background: var(--primary); color: #fff; }
.u-tabs-tipos .ch-tab-badge, .u-tabs-filtro .ch-tab-badge { background: rgba(16, 24, 40, .07); }
.u-tabs-tipos .ch-tab.active .ch-tab-badge, .u-tabs-filtro .ch-tab.active .ch-tab-badge { background: rgba(255, 255, 255, .22); }

/* "Todos" é a visão geral, não um tipo — o traço vertical marca essa
   diferença sem precisar de rótulo extra. */
.ch-tab-sep {
    width: 1px; height: 20px; margin: 0 .25rem;
    background: var(--card-border); flex: 0 0 auto;
}
.u-tabs-tipos .ch-tab-todos, .u-tabs-filtro .ch-tab-todos { font-weight: 600; }
/* Aba sem ninguém dentro fica discreta: continua clicável, mas não disputa a
   atenção com as que têm gente. A classe vem do PHP — o badge contém "0", não
   é vazio, então não há como selecioná-lo por conteúdo em CSS. */
.u-tabs-tipos .ch-tab.is-vazia:not(.active), .u-tabs-filtro .ch-tab.is-vazia:not(.active) { opacity: .55; }
.u-tabs-tipos .ch-tab.is-vazia:not(.active):hover, .u-tabs-filtro .ch-tab.is-vazia:not(.active):hover { opacity: 1; }

/* ============================================================
   Patrimônio (ADM) — bens, movimentação, manutenção
   Reusa .co-badge, .ch-stat e .dash-grid: é o mesmo componente
   visual de Compras e Fornecedores, e duplicar a folha só criaria
   dois lugares para ajustar a mesma coisa.
   ============================================================ */

/* Situação do bem. As cores repetem a semântica das outras telas:
   verde = em ordem, âmbar = parado, roxo = fora para conserto,
   vermelho = fim de vida. */
.pat-ativo      { background: rgba(18,161,80,.12);  color: #15803d; }
.pat-estoque    { background: rgba(217,119,6,.12);  color: #b45309; }
.pat-manutencao { background: rgba(124,58,237,.12); color: #6d28d9; }
.pat-baixado    { background: rgba(100,116,139,.16); color: #475569; }

/* Cores dos cards (reusam .ch-stat via --ch-c/--ch-soft) */
.pat-stat-ativo      { --ch-c: #12a150; --ch-soft: rgba(18,161,80,.12); }
.pat-stat-estoque    { --ch-c: #d97706; --ch-soft: rgba(217,119,6,.12); }
.pat-stat-manutencao { --ch-c: #7c3aed; --ch-soft: rgba(124,58,237,.12); }
.pat-stat-baixado    { --ch-c: #64748b; --ch-soft: rgba(100,116,139,.14); }

/* Bem baixado na lista: continua legível (é histórico consultável),
   mas recuado o suficiente para não ser confundido com inventário. */
.pat-linha-baixada td { opacity: .62; }

/* Número de patrimônio — tabular para os dígitos alinharem na coluna,
   que é como se confere uma etiqueta contra a lista. */
.pat-tombo {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* Ficha: blocos de dados em duas colunas */
.pat-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .9rem 1.4rem; margin: 0; }
.pat-dl > div { min-width: 0; }
.pat-dl dt { font-size: .78rem; color: var(--muted); margin-bottom: .15rem; }
.pat-dl dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* Destaque do valor depreciado — é a resposta a "quanto vale hoje" */
.pat-valor { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: baseline; }
.pat-valor-num { font-size: 1.6rem; font-weight: 700; color: var(--primary); }
.pat-valor-barra { height: 8px; border-radius: 999px; background: var(--primary-soft); overflow: hidden; margin-top: .45rem; }
.pat-valor-barra > span { display: block; height: 100%; border-radius: 999px; background: var(--primary); }

/* Linha do tempo do bem (movimentações, manutenções, eventos) */
.pat-tl { list-style: none; margin: 0; padding: 0; }
.pat-tl li { position: relative; padding: 0 0 1rem 1.4rem; border-left: 2px solid var(--card-border); }
.pat-tl li:last-child { border-left-color: transparent; padding-bottom: 0; }
.pat-tl li::before {
    content: ""; position: absolute; left: -6px; top: .35rem;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--primary); box-shadow: 0 0 0 3px var(--card);
}
.pat-tl-quando { font-size: .78rem; color: var(--muted); }
.pat-tl-texto { overflow-wrap: anywhere; }

/* Cartão de ação na ficha do reembolso — aviso à esquerda, botões à direita,
   empilhando no celular. Usado pelo "ainda é um rascunho" e pelo
   "confirmar recebimento". A tarja da esquerda é que diz de qual se trata. */
.re-enviar-card {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem 1.2rem;
    align-items: center;
    justify-content: space-between;
    border-left: 4px solid #64748b;
}

/* Botão "PDF" na fila de aprovações: ícone + rótulo na mesma linha, sem
   esticar a coluna de ações (que já é apertada no celular). O rótulo fica
   junto do ícone de propósito — ícone sozinho vira adivinhação. */
.re-pdf {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    white-space: nowrap;
}
.re-pdf svg { flex: none; }

/* Confirmar recebimento: verde, porque aqui o ciclo se fecha — cinza (a cor do
   rascunho) leria como "ainda falta alguma coisa sua". */
.re-receber-card { border-left-color: #12a150; }

/* ============================================================
   NOC → ADM → Credenciais
   ============================================================ */

/* Os pontinhos que ocupam o lugar do segredo. Não são a senha escondida —
   o valor não está na página: vem do servidor a cada cópia, atrás do 2FA. */
.noc-cred-mask {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .12em;
    color: var(--muted);
    user-select: none;
}

/* Campo do código de 6 dígitos no modal.
   ⚠️ Duplicado do auth.css de propósito: as telas do NOC carregam o app.css,
   e `.auth-otp` só existe lá — o campo sairia sem estilo nenhum. */
.noc-otp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.4rem;
    letter-spacing: .5em;
    text-align: center;
    padding-left: .5em;
}

/* =====================================================================
   NOC → IPBX (Asterisk)
   Reusa `.stat.ch-stat`, `.badge`, `.table`, `.dash-row` e `.modal` — é o
   mesmo vocabulário do resto do sistema. Só o que é exclusivo desta área
   entra aqui.
   ===================================================================== */

/* ⚠️ `.badge-ok` faltava no projeto: havia `badge-erro`, `badge-alerta` e
   `badge-off`, mas nenhum verde. Entra ao lado dos outros três, com a mesma
   forma (`.badge.badge-x`), para poder ser reusado fora do IPBX. */
.badge.badge-ok { color: var(--alert-success-ink); background: rgba(18, 161, 80, .14); }

/* "3 de 12" no cartão de ramais registrados: o total não compete com o
   número que importa. */
.ipbx-de { font-size: .85rem; font-weight: 400; color: var(--muted); }

/* Linha "fonte: estado" do cartão de conexão. As duas fontes (banco e AMI)
   aparecem separadas de propósito — juntá-las esconderia qual das duas caiu. */
.ipbx-fonte { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem; }

.ipbx-eventos { list-style: none; margin: 0; padding: 0; }
.ipbx-eventos li { padding: .5rem 0; border-bottom: 1px solid var(--card-border); }
.ipbx-eventos li:last-child { border-bottom: 0; }
.ipbx-eventos .hint { display: block; }

.ipbx-atalhos { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.ipbx-acoes-topo { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* Campo da senha + botão de sortear, lado a lado. */
.ipbx-senha-linha { display: flex; gap: .5rem; align-items: stretch; }
.ipbx-senha-linha input { flex: 1; min-width: 0; }

/* Resultado do "Testar" na lista de servidores. */
.ipbx-ok    { color: #12a150; }
.ipbx-falha { color: var(--danger); }

/* Bloco de avisos no rodapé do modal (ramais, troncos, servidores).
   ⚠️ Os textos longos ficam AQUI, e não entre as linhas do formulário: um
   parágrafo no meio do grid empurra as colunas seguintes e desalinha o
   formulário inteiro — foi o que aconteceu na primeira versão desta tela. */
.ipbx-aviso {
    margin: .25rem 0 1.1rem;
    padding: .75rem .9rem;
    border-left: 3px solid var(--card-border);
    background: var(--surface);
    border-radius: 0 8px 8px 0;
}
.ipbx-aviso p {
    margin: 0;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--muted);
}
.ipbx-aviso p + p { margin-top: .5rem; }

/* Nota sob o campo, nos modais do IPBX.
   Escopada pelos ids dos três modais de propósito: `.field-note` é uma classe
   global usada em dezenas de telas, e mexer nela para arrumar esta aqui
   mudaria todas as outras junto. */
#ipbx-ramal-modal .field-note,
#ipbx-tronco-modal .field-note,
#ipbx-srv-modal .field-note {
    display: block;
    margin-top: .35rem;
    font-size: .78rem;
    line-height: 1.4;
}

/* Linha de registro inativo em tabela (Operação → Atendentes).
   Esmaece sem esconder: o cadastro continua existindo e a pessoa pode voltar,
   então sumir com a linha faria a lista mentir sobre quem está cadastrado.
   Segue a forma de `.rh-pv-pendente`, que já marca linha em tabela. */
.row-inativa > td { opacity: .55; }

/* Tipo/perfil/senha fixos no modal de novo atendente.
   ⚠️ São TEXTO, não campo: o servidor é que os fixa (`AtendenteAcesso`), e um
   select de tipo aqui seria o caminho para criar sem querer um usuário interno
   com acesso ao sistema todo. O bloco existe para que quem cadastra veja o que
   vai ser gravado, sem poder mudá-lo. */
.atd-fixos {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: .75rem .9rem;
    margin-bottom: 1.1rem;
    border-left: 3px solid var(--primary);
    background: var(--surface);
    border-radius: 0 8px 8px 0;
}
.atd-fixos .label { display: block; font-size: .74rem; color: var(--muted); margin-bottom: .15rem; }
.atd-fixos strong { font-size: .9rem; }

/* Botão de ação só com ícone, em tabela (Operação → Atendentes).
   Serve a <button> e a <a> — na lista há os dois: reenviar é POST (formulário)
   e editar é link. Sem uma classe comum, um sairia com cara de botão nativo. */
.btn-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    background: var(--card);
    color: var(--muted);
    cursor: pointer;
    vertical-align: middle;
}
.btn-icone + .btn-icone,
form.u-d-inline + .btn-icone { margin-left: .35rem; }
.btn-icone svg { width: 17px; height: 17px; }
.btn-icone:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
.btn-icone:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* NOC → IPBX → URAs */
.ura-sub { margin: 0 0 .6rem; font-size: 1rem; }
.ura-opcoes td { vertical-align: middle; }
.ura-opcoes input, .ura-opcoes .crm-select { width: 100%; }
.ura-barra-td { width: 140px; }
/* A largura vem de `InlineCss::largura()` como CLASSE — a CSP proíbe o
   atributo `style`, e posicionamento não passa pelo allowlist do InlineCss. */
.ura-barra {
    display: block;
    height: 8px;
    border-radius: 4px;
    background: var(--primary);
    min-width: 2px;
}

/* ==========================================================================
   Configurações → CSS (aparência personalizada)
   ========================================================================== */

/* Seletor de cor + código hexadecimal + botão "Padrão", na mesma linha. */
.tema-cor {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* O input nativo de cor vem com tamanho e padding próprios de cada navegador —
   sem estas regras ele fica minúsculo no Safari e enorme no Chrome. */
.tema-cor input[type="color"] {
    inline-size: 46px;
    block-size: 38px;
    padding: 2px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: var(--card);
    cursor: pointer;
    flex: none;
}

.tema-cor .tema-hex {
    inline-size: 8.5rem;
    flex: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    text-transform: lowercase;
}

/* Campo inválido (o `pattern` do HTML) fica evidente antes de salvar: o
   servidor recusa o valor, e descobrir isso só depois de submeter é pior. */
.tema-cor .tema-hex:invalid {
    border-color: var(--danger);
}

.tema-css {
    inline-size: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .86rem;
    line-height: 1.5;
    /* `tab-size` porque CSS colado de outro lugar costuma vir com tabulação. */
    tab-size: 2;
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
}

/* ==========================================================================
   Menu na lateral esquerda  (body.menu-lateral)
   Preferência por usuário — App\Core\MenuPos, gravada em user_prefs.
   ========================================================================== */

/* O botão que alterna a posição, no topstrip. O <form> não pode virar uma
   caixa no meio da fila de ícones: ele é só o invólucro do botão. */
.topstrip-menupos {
    display: inline-flex;
    margin: 0;
}

/* O botão usa .conversas-link, que foi escrito para <a> — sem isto ele herda
   o fundo e a borda do <button> nativo e destoa dos ícones vizinhos. */
.topstrip-menupos .conversas-link {
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
}

@media (min-width: 901px) {
    /*
     * ┌──────────┬───────────────────────┐
     * │          │ topstrip (ícones)     │
     * │  menu    ├───────────────────────┤
     * │          │ conteúdo              │
     * │          ├───────────────────────┤
     * │          │ rodapé                │
     * └──────────┴───────────────────────┘
     *
     * ⚠️ **GRADE COM ÁREAS NOMEADAS, e não flex com quebra de linha.**
     * A primeira versão usava `flex-wrap`, e a faixa do topo virava uma linha
     * inteira ACIMA do menu — a coluna começava no meio da página, e o
     * resultado ficou desalinhado. Com áreas, a posição de cada bloco é
     * declarada e **não depende da ordem no HTML**: o menu ocupa a coluna
     * inteira desde o topo, e a faixa fica só sobre o conteúdo.
     *
     * ⚠️ Os demais filhos do <body> (modais, atalhos, toasts) são todos
     * `position: fixed` — ficam FORA do fluxo e por isso não entram na
     * distribuição automática da grade nem criam linhas fantasmas. Se algum dia
     * um partial passar a renderizar um bloco no fluxo, ele precisa de área
     * própria aqui, senão empurra o layout.
     */
    body.menu-lateral {
        display: grid;
        /* `minmax(0, 1fr)`: sem o mínimo zero, uma tabela larga estoura a
           coluna e o conteúdo passa por baixo do menu. */
        grid-template-columns: var(--menu-lateral-w, 232px) minmax(0, 1fr);
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "menu strip"
            "menu main"
            "menu footer";
        min-height: 100vh;
    }

    body.menu-lateral > .topstrip   { grid-area: strip; }
    body.menu-lateral > .app-main   { grid-area: main; margin: 0; min-width: 0; }
    body.menu-lateral > .app-footer { grid-area: footer; }

    body.menu-lateral > .topbar {
        grid-area: menu;
        /* `sticky` é do modo topo e aqui atrapalha: quem gruda é o conteúdo
           interno da barra, não a coluna, que já ocupa a altura toda. */
        position: static;
        border-bottom: none;
        border-right: 1px solid rgba(0, 0, 0, .15);
        /*
         * ⚠️ Acima do topstrip (z-index 60). Os submenus abrem para a DIREITA,
         * entrando na área da faixa; com o menu em 50 a faixa passaria por cima
         * e cortaria o submenu dos primeiros itens.
         */
        z-index: 70;
        /*
         * ⚠️ SEM `overflow-y: auto`, de propósito. Contêiner com overflow
         * RECORTA filho posicionado — e os submenus abrem justamente para fora
         * da coluna. Com scroll aqui, todo dropdown apareceria cortado. Menu
         * mais alto que a tela apenas rola com a página: mal menor.
         */
        overflow: visible;
    }

    /*
     * ⚠️ A faixa do topo é centrada em 1100px no modo de cima. Aqui ela ocupa
     * só a coluna do conteúdo, e manter a centralização deixaria um vão entre
     * o menu e a logo — o desalinhamento que fez esta tela ser refeita.
     */
    body.menu-lateral .topstrip-inner {
        max-width: none;
        margin: 0;
    }

    /* O menu acompanha a rolagem sem que a coluna precise de scroll próprio. */
    body.menu-lateral .topbar-inner {
        position: sticky;
        top: 0;
        display: block;
        max-width: none;
        padding: .75rem .6rem;
    }

    body.menu-lateral .topnav {
        flex-direction: column;
        align-items: stretch;
        gap: .12rem;
        margin-left: 0;
    }

    /* Cada item ocupa a coluna inteira, com a seta encostada à direita. */
    body.menu-lateral .topnav-link {
        display: flex;
        inline-size: 100%;
        justify-content: space-between;
        white-space: normal;
    }

    body.menu-lateral .topnav .dropdown {
        inline-size: 100%;
    }

    /* A seta aponta para o lado: o submenu abre à direita, e um triângulo para
       baixo mentiria sobre para onde ele vai. */
    body.menu-lateral .topnav .dropdown-toggle .caret {
        transform: rotate(-90deg);
    }

    /* O submenu sai PARA A DIREITA da coluna, alinhado pelo topo do item. */
    body.menu-lateral .topnav .dropdown-menu {
        top: -.4rem;
        left: 100%;
        margin-left: .35rem;
        transform: translateX(-6px);
    }

    body.menu-lateral .topnav .dropdown:hover > .dropdown-menu,
    body.menu-lateral .topnav .dropdown:focus-within > .dropdown-menu {
        transform: translateX(0);
    }

    /* `.right` alinha o menu pela direita do gatilho — faz sentido no topo,
       onde ele encostaria na borda da tela; na lateral jogaria o submenu para
       fora da coluna, por cima do próprio menu. */
    body.menu-lateral .topnav .dropdown-menu.right {
        right: auto;
        left: 100%;
    }
}

/*
 * ⚠️ No celular o menu VOLTA para o topo, sempre. Uma coluna de 232px numa
 * tela de 360px come dois terços do conteúdo — e o `.topnav` já tem o
 * comportamento responsivo dele no modo de cima. A preferência do usuário
 * continua gravada e volta a valer no computador.
 */
@media (max-width: 900px) {
    body.menu-lateral {
        display: block;
    }
}

/* ==========================================================================
   Modo escuro  (body.tema-escuro)
   Preferência por usuário — App\Core\Tema::modo(), gravada em user_prefs.
   ========================================================================== */

/* ============ Skeleton e progresso (sk-, pb-, lazy-) ============ */

/*
 * Skeleton: o lugar onde conteúdo VAI chegar, com a geometria do que chega —
 * o layout não pula quando a resposta entra. Usado só onde há espera real
 * (bloco carregado por AJAX, modal, conversa); página renderizada no servidor
 * chega pronta e não recebe skeleton nenhum.
 *
 * ⚠️ Cores só por TOKEN: `--surface`/`--card-border` são redefinidos no
 * `body.tema-escuro`, então o escuro vem de graça. Hex aqui seria mancha clara
 * no modo escuro — a armadilha registrada nas bolhas do chamado.
 * ⚠️ Geometria em classe fixa: `InlineCss` só libera cor/fundo/largura, e
 * partial servida por AJAX nem isso.
 */
.sk {
    display: block;
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    animation: sk-pulso 1.8s ease-in-out infinite;
}
.sk-linha  { height: .8rem; margin: .45rem 0; }
.sk-titulo { height: 1.1rem; width: 55%; margin-bottom: .8rem; }
.sk-bloco  { height: 200px; border-radius: var(--radius); }
.sk-circulo { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; }
.sk-barra  { height: 14px; border-radius: 4px; }   /* mesma geometria de .rp-bar-track */
.sk-w-25 { width: 25%; } .sk-w-40 { width: 40%; } .sk-w-60 { width: 60%; }
.sk-w-80 { width: 80%; } .sk-w-100 { width: 100%; }
/* Linha de lista (avatar + duas linhas), estilo .conv-item / .cht-msg */
.sk-item { display: flex; gap: .6rem; align-items: center; padding: .6rem .9rem; border-bottom: 1px solid var(--card-border); }
.sk-item > div { flex: 1 1 auto; min-width: 0; }
.sk-item:last-child { border-bottom: none; }
.sk-grupo { padding: 1rem; }
/* Linha de barra (rótulo + trilha), estilo .rp-bar-row */
/* ⚠️ A coluna do valor é FIXA (não `auto`): com `auto`, um filho de 100% de
   largura toma tudo e a trilha do meio vira um quadradinho — visto no render. */
.sk-linha-barra { display: grid; grid-template-columns: 150px minmax(0, 1fr) 72px; align-items: center; gap: .7rem; margin: .7rem 0; }
.sk-linha-barra > .sk { margin: 0; }

/* Pulso lento de opacidade: discreto, nunca um brilho deslizante. */
@keyframes sk-pulso { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
/* ⚠️ Quem pediu menos movimento vê o placeholder parado, um pouco mais apagado
   para continuar lendo como "ainda não chegou". */
@media (prefers-reduced-motion: reduce) {
    .sk { animation: none; opacity: .7; }
}

/* Falha ao carregar um bloco: o skeleton NUNCA fica para sempre. */
.lazy-erro { padding: 1rem; color: var(--muted); font-size: .85rem; }
.lazy-erro button { background: none; border: none; padding: 0; color: var(--primary); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
[data-lazy][data-lazy-state="carregando"] { min-height: 3rem; }

/*
 * Barra de progresso da navegação (ui.js): 3px no topo, aparece 150ms depois
 * do clique num link da própria origem e some no `pageshow`. É o sinal de
 * "a próxima página está vindo" que uma app renderizada no servidor consegue
 * dar com honestidade — sem skeleton falso sobre conteúdo que já chegou.
 * z-index acima do `.nn-loading` (1300), mas o JS nunca mostra os dois.
 */
.pb {
    position: fixed; top: 0; left: 0; width: 100%; height: 3px;
    z-index: 1400; pointer-events: none; overflow: hidden;
    opacity: 0; transition: opacity .2s;
}
.pb.is-on { opacity: 1; }
.pb-fill {
    display: block; height: 100%; width: 30%;
    background: var(--primary);
    animation: pb-corre 1.2s ease-in-out infinite;
}
@keyframes pb-corre { from { transform: translateX(-100%); } to { transform: translateX(400%); } }
@media (prefers-reduced-motion: reduce) {
    .pb-fill { animation: none; width: 100%; }
}

/*
 * ⚠️ **Só os tokens são redefinidos — nenhum componente é reescrito.** É isso
 * que torna o modo escuro barato de manter: o app.css usa `var(--…)` em mais de
 * mil lugares, e as 33 cores de fundo que ainda eram literais foram
 * tokenizadas junto com esta mudança. Componente novo que use os tokens ganha
 * o modo escuro de graça; componente novo com `#fff` escrito à mão nasce com
 * uma mancha branca — é o único cuidado que sobra.
 *
 * ⚠️ Vem DEPOIS de tudo no arquivo, e o seletor é `body.tema-escuro`
 * (especificidade 0,2,0) contra o `:root` (0,1,0) de onde vêm os padrões e as
 * cores de Configurações → CSS. Assim a escolha do usuário vence a do sistema
 * sem precisar de `!important`.
 */
body.tema-escuro {
    --bg: #171213;
    --bg-tint-1: #1e1718;
    --bg-tint-2: #171213;
    --bg-glow: #251a1c;

    --card: #211a1b;
    --card-border: #382c2d;
    --surface: #2a2122;

    --text: #ece5e5;
    --muted: #a2908f;
    /* 5,64:1 sobre o --card do escuro. */
    --ch-axis: #a2908f;

    /* Clareadas: o vermelho e o verde do modo claro foram escolhidos para
       contrastar com branco, e sobre fundo escuro eles somem. */
    --danger: #e2645c;
    --danger-soft: rgba(226, 100, 92, .16);
    --success: #35c46f;

    --shadow: 0 18px 45px -22px rgba(0, 0, 0, .75);
    --shadow-sm: 0 2px 10px -4px rgba(0, 0, 0, .55);

    /*
     * ⚠️ A cor principal é CLAREADA a partir de `--primary-base`, não repetida
     * aqui: assim a cor que o administrador escolher em Configurações → CSS
     * continua sendo a cor do sistema no escuro, só que legível. Referir-se a
     * `var(--primary)` seria circular e o navegador descartaria a regra.
     */
    --primary: color-mix(in srgb, var(--primary-base) 68%, #ffffff);
    --primary-hover: color-mix(in srgb, var(--primary-base) 82%, #ffffff);
    --primary-soft: color-mix(in srgb, var(--primary-base) 26%, transparent);
    --ring: color-mix(in srgb, var(--primary-base) 45%, transparent);

    /*
     * Bolhas do chamado. O fundo era `#f2fbf5`/`#fffaed` escrito no componente
     * e o escuro não o alcançava: o corpo da mensagem usa `var(--text)`, então
     * ficava texto claro sobre fundo claro e a resposta da equipe sumia da
     * tela. Aqui as superfícies viram tons escuros com a mesma tinta (verde e
     * âmbar), e o NOME do autor é clareado — `#0a7a37` e `#9a7714` foram
     * escolhidos para contrastar com branco e desaparecem no escuro.
     *
     * ⚠️ Os tokens do avatar NÃO são redefinidos de propósito: é um círculo
     * sólido com iniciais brancas, que continua legível sobre o fundo escuro.
     */
    --chat-out-bg: #16281d;
    --chat-out-line: #35c46f;
    --chat-out-name: #6cd996;
    --chat-note-bg: #2a2312;
    --chat-note-line: #e0b431;
    --chat-note-name: #e8c65b;

    /*
     * WhatsApp. A tela de conversa fica um pouco MAIS escura que o `--bg`
     * para as bolhas (`--card`) se destacarem sobre ela — no claro é o
     * bege do WhatsApp fazendo esse papel.
     */
    --wa-canvas: #120e0f;
    --wa-out-bg: #16321f;
    --wa-out-name: #5fd98a;
    --wa-meta: #9aa8a0;

    /* Kanban e modal do card — ver os tokens no :root. Valores MEDIDOS contra
       `--card` (#211a1b): tinta ≥ 4,5:1, contorno de controle ≥ 3:1. */
    --kb-col-bg: #1b1516;
    --kb-card-border: #3a2e2f;
    --kb-card-accent: #74808f;
    --kb-count-bg: rgba(255, 255, 255, .10);
    --kb-count-ink: #cfc6c5;
    --kb-card-late-bg: #2e1c1d;
    --tc-bg: #1c1718;
    --tc-ink: #ece5e5;
    --tc-ink-soft: #c2b7b6;
    --tc-ink-muted: #a2908f;
    --tc-chip: #3a3031;
    --tc-chip-hover: #4a3e3f;
    --tc-progress: #35c46f;
    --tc-danger: #ec807a;
    --tc-danger-soft: rgba(226, 100, 92, .16);
    --tc-danger-soft-hover: rgba(226, 100, 92, .26);
    --alert-error-ink: #f2938d;
    --alert-success-ink: #6cd996;
    --alert-info-ink: #9dbdff;
    --alert-warn-ink: #f0b357;
    --pill-muted-bg: rgba(255, 255, 255, .10);
    --pill-muted-ink: #b8a9a8;
    --control-border: #7f6e6f;

    /* ⚠️ Faz o navegador desenhar barra de rolagem, seletor de data e campos
       nativos na versão escura. Sem isto sobram retângulos brancos que nenhum
       CSS nosso alcança. */
    color-scheme: dark;
}

/*
 * Navegador sem `color-mix` (Safari < 16.2): a cor principal fica igual à do
 * modo claro. Menos contraste, mas legível — e melhor que a regra inteira ser
 * descartada, que é o que acontece quando uma declaração não é entendida.
 */
@supports not (color: color-mix(in srgb, red, blue)) {
    body.tema-escuro {
        --primary: var(--primary-base);
        --primary-hover: var(--primary-base);
        --primary-soft: rgba(255, 255, 255, .10);
        --ring: rgba(255, 255, 255, .22);
    }
}

/*
 * Aba de filtro ATIVA no escuro — tinta escura, não branca.
 *
 * ⚠️⚠️ No escuro o `--primary` é clareado (`color-mix` 68% + branco → #ba7676)
 * para se destacar do fundo. Texto BRANCO sobre ele mede **3,53:1** e reprova.
 * A pílula clara continua sendo o sinal certo de "selecionada" (4,84:1 contra
 * o card, bem visível); o que muda é a tinta: escura, dá **5,03:1**.
 *
 * ⚠️ O selo precisa clarear junto: com o fundo escurecido de antes, a tinta
 * escura sobre ele media 3,72:1. Com branco a 35% dá 8,26:1.
 *
 * ⚠️ Isto vale para as abas de Sistema → Usuários também — elas herdam a
 * mesma regra e tinham o mesmo problema.
 *
 * Nota: `.btn` tem o MESMO defeito no escuro (branco sobre `--primary`,
 * 3,53:1) e NÃO foi mexido aqui — é a cor de todo botão primário do sistema, e
 * mudá-la é decisão de produto, não efeito colateral de uma tela de compras.
 */
body.tema-escuro .u-tabs-tipos .ch-tab.active,
body.tema-escuro .u-tabs-filtro .ch-tab.active { color: #2a1010; }
body.tema-escuro .u-tabs-tipos .ch-tab.active .ch-tab-badge,
body.tema-escuro .u-tabs-filtro .ch-tab.active .ch-tab-badge {
    background: rgba(255, 255, 255, .35); color: #2a1010;
}

/*
 * A barra do menu no escuro: cinza chapado, sem o degradê.
 *
 * ⚠️ A forma CURTA (`background`) é o que faz isto funcionar — ela zera o
 * `background-image` do modo claro. Com `background-color` o degradê
 * continuaria pintado por cima e o cinza não apareceria.
 */
body.tema-escuro .topbar {
    background: #323232;
}

/* A faixa do topo tem borda clara no modo claro; no escuro ela precisa da
   borda do cartão para não sumir contra o fundo. */
body.tema-escuro .topstrip {
    border-bottom-color: var(--card-border);
}

/* Imagem e vídeo não são interface: no escuro elas continuam com a cor
   original. Só o brilho é aliviado, para não "estourar" contra o fundo. */
body.tema-escuro img:not([src$=".svg"]),
body.tema-escuro video {
    filter: brightness(.94);
}

/*
 * Componentes com cor CLARA escrita à mão, que os tokens não alcançam.
 *
 * ⚠️ São os que ocupam área grande — ícones do topo, balões de conversa,
 * corpo de mensagem. As pílulas pequenas (`.pill-ok`, `.pill-prio-*`) ficam de
 * fora de propósito: são chips coloridos com texto escuro, e continuam
 * legíveis no escuro como continuam no claro. Tokenizar as 70 ocorrências
 * restantes às cegas daria mais chance de estragar do que de melhorar.
 */
body.tema-escuro .conversas-link {
    background: var(--surface);
    border-color: var(--card-border);
    color: var(--text);
}

body.tema-escuro .conversas-link:hover,
body.tema-escuro .conversas-link.active {
    background: var(--card-border);
    border-color: var(--muted);
}

/* O vermelho da denúncia sobrevive ao escuro: a regra acima (0,2,1) pintaria
   o ícone com --text. */
body.tema-escuro .conversas-link.conversas-link-den { color: var(--danger); }
body.tema-escuro .conversas-link.conversas-link-den:hover,
body.tema-escuro .conversas-link.conversas-link-den.active { background: var(--danger-soft); border-color: var(--danger); }

body.tema-escuro .msg-body {
    background: var(--surface);
    color: var(--text);
}

body.tema-escuro .msg-body .md-pre {
    background: var(--bg);
}

body.tema-escuro .im-msg.mentions-me .im-bubble {
    background: color-mix(in srgb, var(--primary-base) 24%, var(--card));
}

body.tema-escuro .im-emoji-pop-comp {
    border-color: var(--card-border);
}

/* Realce da busca: amarelo claro com texto escuro continua legível, mas o
   texto ao redor é claro — sem fixar a cor, a palavra achada some. */
body.tema-escuro mark.im-mark {
    color: #2b1f1f;
}

/* Operadoras → CNPJ repetido.
   .op-cnpj-dup: o aviso dentro do modal, logo abaixo do campo (bloqueia o Salvar).
   .op-repetidos: as duplicatas que vieram de ANTES da trava, no topo da lista —
   âmbar, e não vermelho: pede uma arrumação, não aponta um erro desta tela. A
   tinta é o token por modo (`--alert-warn-ink`), nunca um âmbar escrito à mão. */
.op-cnpj-dup { margin: .5rem 0 0; font-size: .84rem; }
.op-cnpj-dup a { color: inherit; font-weight: 600; text-decoration: underline; }
.op-repetidos {
    margin: 0 0 1.2rem; padding: .75rem .9rem; border-radius: 11px; font-size: .9rem;
    color: var(--alert-warn-ink);
    background: color-mix(in srgb, var(--alert-warn-ink) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--alert-warn-ink) 30%, transparent);
}
.op-repetidos ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.op-repetidos li { margin: .15rem 0; }
.op-repetidos a { color: inherit; font-weight: 600; text-decoration: underline; }

/* Operadoras → busca da lista. O formulário é o painel de filtros do projeto
   (`.crm-panel`), com o campo largo e os botões na MESMA linha, da mesma altura
   do campo — `align-items: stretch` faz o botão acompanhar o input em vez de
   cada um ter a sua altura. Os seletores levam `.op-busca` na frente para
   vencer `.ff input` (0,1,1) e `.ff input:focus` (0,2,1). */
.op-busca .op-busca-linha { display: flex; flex-wrap: wrap; align-items: stretch; gap: .5rem; }
.op-busca .op-busca-campo { position: relative; flex: 1 1 320px; min-width: 0; }
.op-busca .op-busca-lupa {
    position: absolute; left: .8rem; top: 50%; transform: translateY(-50%);
    color: var(--muted); pointer-events: none;
}
.op-busca .op-busca-campo input {
    height: 100%; min-height: 2.75rem;
    padding: .65rem .85rem .65rem 2.4rem; font-size: 1rem;
    border-color: var(--control-border); background: var(--card);
}
.op-busca .op-busca-campo input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.op-busca .op-busca-btn {
    flex: 0 0 auto; width: auto;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 1.2rem; min-height: 2.75rem; font-size: .95rem;
}
.op-busca .field-note { display: block; margin-top: .4rem; font-size: .78rem; color: var(--muted); opacity: 1; }
.op-busca-resumo { margin: -.25rem 0 .75rem; font-size: .9rem; color: var(--muted); }
.op-busca-resumo strong, .op-busca-termo { color: var(--text); font-weight: 600; }
.op-busca-onde { font-size: .8rem; }
/* O que a busca achou. Fundo E tinta fixos (mesmo par da Auditoria → Conversas):
   no escuro, só o fundo deixaria a palavra clara sobre o amarelo, ilegível. */
.op-lista mark { background: #fde68a; color: #3b2a00; border-radius: 3px; padding: 0 .1em; }
/* Enquanto a lista é relida: esmaece no lugar, sem skeleton — o conteúdo
   anterior continua válido até o novo chegar (regra do polling). */
.op-lista { transition: opacity .15s; }
.op-lista.is-carregando { opacity: .55; }
@media (prefers-reduced-motion: reduce) { .op-lista { transition: none; } }
@media (max-width: 520px) {
    .op-busca .op-busca-campo { flex-basis: 100%; }
    .op-busca .op-busca-btn { flex: 1 1 0; }
}
/* Número de cargas alinhado à direita no computador. No celular a célula vira
   flex com o rótulo de um lado e o valor do outro — e o rótulo continua lá. */
.op-lista td.op-num { text-align: right; font-variant-numeric: tabular-nums; }
/* No cartão do celular a razão social (com fantasia e o "onde achou") desce
   INTEIRA para baixo do rótulo: lado a lado, cada linha virava uma coluna. */
@media (max-width: 640px) {
    .op-lista .table tbody td.op-td-nome { flex-direction: column; gap: .2rem; }
}

/* Operadoras → acessos ao portal (vários responsáveis por operadora). */
.op-acessos { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .8rem; }

.op-acesso {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .5rem .7rem;
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: 10px;
}

.op-acesso-quem { display: flex; flex-direction: column; min-width: 0; }
.op-acesso-quem .hint { font-size: .78rem; }
.op-acesso-acoes { display: flex; gap: .4rem; flex-wrap: wrap; }

/* Sistema → Atualizações: acompanhamento da instalação pela tela. */
.at-prontidao { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .84rem; list-style: none; }
.at-prontidao li { margin: .15rem 0; }
.at-prontidao .at-ok  { color: var(--success); }
.at-prontidao .at-nao { color: var(--danger); font-weight: 600; }

.at-progresso {
    margin-top: 1rem;
    padding: .9rem 1rem;
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
}
.at-progresso-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }

.at-log {
    max-block-size: 18rem;
    overflow: auto;
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* O giro só existe enquanto a instalação corre; o JS remove a classe no fim. */
.at-spin {
    inline-size: 14px;
    block-size: 14px;
    border: 2px solid var(--card-border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: at-girar .8s linear infinite;
}
.at-spin[hidden] { display: none; }

@keyframes at-girar { to { transform: rotate(360deg); } }

/* ⚠️ Quem pediu para reduzir animação não deve receber um giro perpétuo. */
@media (prefers-reduced-motion: reduce) {
    .at-spin { animation: none; }
}

/* ============ Operadoras » Chaves de API ============ */

/*
 * ⚠️ A chave recém-gerada tem destaque VISUAL de propósito: ela aparece uma
 * única vez (o banco guarda só o sha256) e um bloco parecido com os demais
 * seria fechado sem ser lido. A borda usa `--primary`, não `--danger`: não é
 * erro, é algo a fazer agora.
 */
.chave-nova {
    border-left: 4px solid var(--primary);
}

.chave-valor {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .7rem .9rem;
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
}

/*
 * `user-select: all` faz um clique selecionar a chave inteira — o botão de
 * copiar é o caminho normal, e isto salva quem estiver num navegador que negou
 * a área de transferência (contexto sem HTTPS, permissão bloqueada).
 * `break-all` porque são 53 caracteres sem espaço nenhum: sem isso a linha
 * empurra a largura da página no celular.
 */
.chave-valor code {
    flex: 1 1 20ch;
    font-size: .95rem;
    word-break: break-all;
    user-select: all;
}

.chave-exemplo {
    padding: .8rem .9rem;
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    /* Comando de terminal não se quebra em linhas: rola dentro do próprio
       bloco, que é a regra do projeto para conteúdo largo. */
    overflow-x: auto;
    white-space: pre;
}

/* Selo de origem do envio, nas listas de Envios. */
.origem-api {
    font-size: .75rem;
    padding: .1rem .4rem;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    white-space: nowrap;
}

/* Cabeçalho de card com ação à direita (ex.: "Suas chaves" + "Gerar chave").
   ⚠️ Classe própria em vez de reusar `.op-tasks-head`: aquele "op" é de
   OPORTUNIDADE (CRM), e usá-lo no portal da Operadora leria como se fosse dela. */
.card-head-acao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    flex-wrap: wrap;
    margin-bottom: .8rem;
}

/* Barra acima de um bloco de código: dica à esquerda, "Copiar" à direita. */
.cod-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    flex-wrap: wrap;
    margin-bottom: .4rem;
}


/* ============ Dashboard → Comercial ============ */

/*
 * Barra na cor da MARCA (e do tema): `.rp-bar-fill` tem `#2a78d6` fixo para o
 * relatório de CRM; aqui a barra é magnitude de uma cor só e segue
 * `--primary` — que é a cor que o administrador escolheu e que o escuro
 * clareia sozinho. Uma cor, ponta arredondada de 4px, base reta.
 */
.rp-bar-fill.rp-bar-primary { background: var(--primary); }

/*
 * O número que lidera a tela. ≥ 48px, mesma família de tudo — nunca serifa
 * ou display. ⚠️ Algarismos PROPORCIONAIS: `.stat .value` é tabular (certo para
 * a fileira de cards, que se lê como coluna), mas num número grande e sozinho
 * o tabular deixa "121" solto, com o "1" ocupando o espaço de um "0".
 */
/*
 * ⚠️ O herói ocupa DUAS colunas do grid: em 2,3rem "R$ 1.284.930,00" tem ~15
 * caracteres e não cabe num tile de 220px — saía cortado no meio. Com
 * `span 2` mais os quatro tiles de ação dá exatamente cinco colunas de 220px,
 * uma linha só em 1200px; abaixo disso o `auto-fit` reflui sozinho.
 * `nowrap` porque dinheiro partido em duas linhas é ilegível (mesma regra do
 * `.stat .value`).
 */
.stat-hero { grid-column: span 2; }
.stat-hero .label { font-size: .82rem; color: var(--muted); }
.stat-hero .value {
    font-size: 2.3rem;
    white-space: nowrap;
    font-weight: 750;
    letter-spacing: -.02em;
    line-height: 1.05;
    font-variant-numeric: normal;
    font-feature-settings: normal;
}
@media (max-width: 640px) { .stat-hero { grid-column: span 1; } .stat-hero .value { font-size: 1.7rem; } }

/* Cores dos cards de ação (faixa + ícone), no molde `.ch-stat-*`. Parada e
   vencida são estados que pedem ação — âmbar e vermelho; mês e nova, neutros. */
.cm-stat-parada  { --ch-c: #b7791a; --ch-soft: rgba(183, 121, 26, .12); }
.cm-stat-vencida { --ch-c: var(--danger); --ch-soft: var(--danger-soft); }
.cm-stat-mes     { --ch-c: #2a78d6; --ch-soft: rgba(42, 120, 214, .12); }
.cm-stat-nova    { --ch-c: var(--success); --ch-soft: rgba(18, 161, 80, .12); }
body.tema-escuro .cm-stat-parada { --ch-c: #e8c65b; }
body.tema-escuro .cm-stat-mes    { --ch-c: #7fb0ec; }
/* A trilha vazia (etapa com R$ 0) tem de continuar visível no escuro: com
   `rgba(16,24,40,.06)` sobre card escuro ela some e a barra zerada vira ausência. */
body.tema-escuro .rp-bar-track { background: rgba(255, 255, 255, .09); }


/* ============ Dashboard → Financeiro ============ */

.fd-secao { font-size: 1.05rem; font-weight: 700; margin: 1.4rem 0 .6rem; color: var(--muted); }

/* Tile com sparkline à direita: o número diz o valor, a linha diz a direção. */
.fd-tile { display: flex; align-items: center; justify-content: space-between; gap: .6rem; width: 100%; }
.fd-spark { flex: none; color: var(--ch-c, var(--primary)); opacity: .9; }
.rp-spark { display: block; }

/*
 * Barra pintada com a cor de STATUS do próprio módulo: `.re-stat-*` e
 * `.co-stat-*` já definem `--ch-c`, então a mesma classe que colore o card de
 * resumo colore a barra — uma fonte de verdade para "pendente é âmbar".
 */
.rp-bar-fill.fd-bar { background: var(--ch-c, var(--primary)); }
.fd-bar-atencao { --ch-c: #b7791a; }
body.tema-escuro .fd-bar-atencao { --ch-c: #e8c65b; }

/* Variação mês a mês. ⚠️ Em DESPESA, subir é atenção (âmbar), descer é neutro —
   o verde de "bom" seria mentira para um gasto que cresceu. */
.fd-delta { font-weight: 600; }
.fd-delta-sobe  { color: #b7791a; }
.fd-delta-desce { color: var(--muted); }
body.tema-escuro .fd-delta-sobe { color: #e8c65b; }

/* ============ Financeiro (fin-) ============
   Recuo da árvore do plano de contas e dos centros de custo. É CLASSE por
   nível, e não `padding-left` calculado: o `InlineCss` não libera
   posicionamento, e a CSP proíbe `style=""`. Quatro níveis cobrem
   "5.3.10.01" — mais fundo que isso o plano não precisa ir. */
.fin-nivel-0 { padding-left: 0; font-weight: 700; }
.fin-nivel-1 { padding-left: .9rem; font-weight: 600; }
.fin-nivel-2 { padding-left: 1.8rem; }
.fin-nivel-3 { padding-left: 2.7rem; }
.fin-nivel-4 { padding-left: 3.6rem; }
.fin-nivel-0, .fin-nivel-1, .fin-nivel-2, .fin-nivel-3, .fin-nivel-4 {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
/* No celular a tabela vira lista com rótulo — o recuo perde o sentido e só
   empurra o valor para fora da tela. */
@media (max-width: 760px) {
    .fin-nivel-1, .fin-nivel-2, .fin-nivel-3, .fin-nivel-4 { padding-left: 0; }
}

/* Situação do título. Cada pílula define fundo E tinta — é o que a faz
   sobreviver ao modo escuro sozinha (pílula que só define fundo herda o texto
   claro do tema e some). */
.pill-fin-aberto    { background: #e7f0ff; color: #1a63d6; }
.pill-fin-parcial   { background: #fff4e0; color: #a8620a; }
.pill-fin-liquidado { background: #e6f7ec; color: #1a7f43; }
.pill-fin-cancelado { background: #f1f1f1; color: #6b6b6b; }
.pill-fin-vencido   { background: #fdecec; color: #b32020; }
body.tema-escuro .pill-fin-aberto    { background: #16283f; color: #8ab6f5; }
body.tema-escuro .pill-fin-parcial   { background: #3a2c14; color: #e8c65b; }
body.tema-escuro .pill-fin-liquidado { background: #12301f; color: #6fd39a; }
body.tema-escuro .pill-fin-cancelado { background: #2a2a2a; color: #a0a0a0; }
body.tema-escuro .pill-fin-vencido   { background: #3a1a1a; color: #f08a8a; }

/* Barra de ação da seleção em lote (títulos). Nasce escondida via [hidden]. */
.fin-lote {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    padding: .7rem 1rem; margin-top: 1rem;
    background: var(--primary-soft); border: 1px solid var(--card-border); border-radius: var(--radius);
}
.fin-lote strong { font-variant-numeric: tabular-nums; }
/* Linha de rateio do modal: conta, centro de custo, valor e o botão de tirar. */
.fin-rateio-linha { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1.4fr) 130px 40px; gap: .5rem; align-items: end; margin-bottom: .5rem; }
@media (max-width: 760px) { .fin-rateio-linha { grid-template-columns: 1fr 1fr; } }
/* A soma do rateio fica vermelha quando não bate com o valor do título — o JS
   só alterna a classe (`.is-erro` genérica não existe fora do `.pv-resultado`). */
[data-rateio-soma].is-erro { color: var(--danger); }

/* ============ Relatórios do financeiro ============ */
/* Linha de subtotal da DRE: é a leitura que importa, então ganha peso e uma
   régua acima separando do que a compõe. */
.fin-dre-sub td { font-weight: 700; border-top: 2px solid var(--card-border); background: var(--surface); }
/* Conta dentro do grupo: recuada e discreta — o número do grupo é o que conta. */
.fin-dre-conta td { color: var(--muted); font-size: .85rem; }
.fin-dre-conta td:first-child { padding-left: 2.2rem; }
/* Resultado final: destaca o número que a pessoa abriu a tela para ver. */
.fin-dre-final td { font-size: 1.05rem; border-top: 2px solid var(--primary); }
/* Valor negativo em relatório — prejuízo, saldo estourado. */
.fin-neg { color: var(--danger); }
/* Aviso do balancete quando débito e crédito não fecham. */
.fin-confere { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
/* Coluna de mês futuro no fluxo: o previsto não tem o mesmo peso do realizado. */
.fin-futuro td { background: var(--surface); }

/* Contador de permissões concedidas na aba — com 15 grupos, é o que diz onde
   há algo marcado sem precisar abrir um por um.
   ⚠️ `color: inherit` + fundo translúcido de propósito: a aba ATIVA tem fundo
   na cor da marca e texto branco, e a inativa é clara com texto acinzentado.
   Herdando a cor, o contador fica legível nos dois estados com UMA regra — a
   alternativa seria repetir os 24 seletores `:checked` só para ele. */
.tab-badge {
    display: inline-block; margin-left: .4rem; padding: 0 .35rem;
    min-width: 1.2em; border-radius: 999px;
    background: rgba(127, 127, 127, .22); color: inherit;
    font-size: .72rem; font-weight: 700; line-height: 1.5;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Backoffice » Negativação — cabeçalho com busca (hoje usado pelo Controle de Erros).
   ⚠️ O FAQ "Regras" que nasceu aqui foi REMOVIDO (set/2026); ficaram só estas duas
   regras, que o Controle de Erros reusa
   ========================================================================== */
.neg-regras-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 1rem 0 1.1rem; }
.neg-regras-busca { display: flex; gap: .4rem; flex: 1 1 320px; min-width: 0; }
/* ⚠️ `min-width: 0` nos dois: item de flex nasce com o mínimo do CONTEÚDO, e
   sem isso o campo de busca empurra o "+ Nova regra" para fora do cartão. */
.neg-regras-busca input { flex: 1 1 auto; min-width: 0; }

/* ---- Controle de negativações: catálogo de erros dos órgãos ---- */
/* Contador dentro da aba (Serasa 382 · SPC 100). */
.neg-erro-num {
    display: inline-block; min-width: 1.2em; padding: 0 .35rem; margin-left: .25rem;
    border-radius: 999px; background: rgba(127, 127, 127, .22); color: inherit;
    font-size: .72rem; font-weight: 700; line-height: 1.5;
    font-variant-numeric: tabular-nums;
}
/* A coluna do código é estreita e não quebra: "000" e "068" alinhados um sob o
   outro é o que faz a lista ser varrida com o olho. */
.neg-erro-cod {
    width: 1%; white-space: nowrap; font-weight: 600;
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
.neg-erro-obs { display: block; margin-top: .15rem; color: var(--muted); font-size: .82rem; }
/* ⚠️ `nowrap` nos DOIS: sem isso o <form> do Excluir quebra para a linha de
   baixo e cada linha da tabela vira um bloco de ~130px de altura — num
   catálogo de centenas de códigos, a lista fica impossível de varrer com o
   olho. `width: 1%` faz a coluna encolher até o conteúdo, devolvendo o espaço
   para a descrição, que é o que se lê. */
.neg-erro-acoes { display: flex; align-items: center; gap: .4rem; flex-wrap: nowrap; }
.neg-erro-acoes-cel { width: 1%; white-space: nowrap; }
/* A marcação do Serasa é a letra X da tabela dele, não um ícone: quem confere
   o retorno está comparando com o PDF do órgão. */
.neg-erro-marca { font-weight: 700; font-size: .9rem; }
/* ⚠️ `.field textarea` NÃO existe no projeto (só `.field input, .field select`),
   então a caixa de colar precisa do próprio estilo — sem ele sai com a cara
   crua do navegador, sem borda nem tema. Monoespaçada porque o que se cola ali
   são colunas, e é assim que se enxerga o TAB. */
.neg-erro-area {
    width: 100%; min-height: 240px; resize: vertical;
    padding: .7rem .8rem; border: 1px solid var(--card-border); border-radius: 11px;
    background: var(--surface); color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85rem; line-height: 1.5; outline: none;
}
.neg-erro-area:focus { border-color: var(--primary); background: var(--card); box-shadow: 0 0 0 4px var(--ring); }

/* ---- Controle de Negativações: dashboard + lista ---- */
.neg-lan-card {
    background: var(--card); border: 1px solid var(--card-border);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: .9rem 1rem;
    /* Os três cards da fileira com a mesma altura, independentemente de o
       ranking ter 3 ou 8 credores. */
    align-self: stretch; display: flex; flex-direction: column; gap: .6rem;
}
.neg-lan-card-tit { margin: 0; font-size: .95rem; color: var(--text); }
.neg-lan-vazio { margin: 0; color: var(--muted); font-size: .88rem; }
/* O SVG do Chart tem largura fixa: `max-width` deixa ele encolher com o card em
   vez de estourar a coluna. */
.neg-lan-graf svg { display: block; width: 100%; height: auto; max-width: 100%; }

.neg-lan-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.neg-lan-rank li { display: grid; grid-template-columns: minmax(0, 1fr) 1fr auto; align-items: center; gap: .5rem; }
.neg-lan-rank-nome {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: .85rem; color: var(--text);
}
.neg-lan-rank-barra { height: 8px; border-radius: 999px; background: var(--surface); overflow: hidden; }
/* Magnitude: UMA cor, a da marca — paleta categórica sugeriria que cada credor
   é uma categoria com significado próprio. */
.neg-lan-rank-fill { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.neg-lan-rank-val {
    font-size: .8rem; color: var(--muted); white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.neg-lan-acoes-filtro { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* Título e ações na mesma linha, com as ações à direita. `align-items: center`
   e não `flex-end`: o `.page-head` tem subtítulo, e alinhar pela base jogaria
   os botões para baixo dele. */
.neg-lan-topo {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
}
/* O `.page-head` já traz a margem de baixo — aqui ele é um item de flex e
   precisa poder encolher para os botões caberem na mesma linha. */
.neg-lan-topo > .page-head { flex: 1 1 320px; min-width: 0; margin-bottom: 0; }
.neg-lan-topo-acoes { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.neg-lan-topo + .card { margin-top: 1rem; }

/* ---- Backoffice » Notificação » Efetividade (mig. 160) ---- */
.efe-topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.efe-topo > .page-head { flex: 1 1 320px; min-width: 0; margin-bottom: 0; }
.efe-topo-acoes { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.efe-acoes-filtro { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.efe-acoes-filtro .hint { flex: 1 1 260px; }
/* Números à direita SEM `ta-right`: no celular a tabela vira cartão e
   `.ta-right::before` some com o rótulo. */
.table td.efe-num { text-align: right; white-space: nowrap; }
.table td.efe-pct { font-weight: 700; }
/* SEM REMESSA: o verde da planilha, pelos tokens de "sucesso" (têm tom
   próprio no escuro). */
.table td.efe-sem {
    text-align: center; font-weight: 700; font-size: .78rem; letter-spacing: .06em;
    color: var(--alert-success-ink);
    background: color-mix(in srgb, var(--success) 14%, transparent);
}
/* Credor e meio repetem em cada linha (o cartão do celular precisa deles);
   do segundo mês em diante ficam discretos. */
.table td.efe-rep { color: var(--muted); }
.efe-acoes { display: flex; align-items: center; gap: .4rem; flex-wrap: nowrap; }
.table .efe-acoes-cel { width: 1%; white-space: nowrap; }
/* Separação dos blocos credor + meio, como na planilha. */
@media (min-width: 641px) {
    .table tr.efe-bloco-ini > td { border-top: 2px solid var(--control-border); }
    .efe-tabela tbody tr:first-child > td { border-top: 0; }
}
@media (max-width: 640px) {
    .table td.efe-num { justify-content: space-between; }
}
/* Sistema » Backoffice » Meios: as setas ↑↓ alinhadas (a vaga da seta que
   não existe nas pontas fica reservada). */
.bk-ordem { display: inline-grid; grid-template-columns: repeat(2, 2.25rem); gap: .3rem; }
.bk-ordem .btn-ghost { width: 100%; padding-left: 0; padding-right: 0; }
.bk-ordem-vazio { display: block; }

/* ---- Conversas: fila de anexos do compositor (vários por mensagem) ---- */
.im-attach-list { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
/* ⚠️ O chip já trazia `margin-bottom` de quando era ÚNICO; dentro da lista
   quem espaça é o `gap`, e manter os dois dobrava o vão entre as linhas. */
.im-attach-list .im-attach-chip { margin-bottom: 0; }

/* ---- CRM: ordem dos cartões — um botão por COLUNA, no cabeçalho ---- */
/* ⚠️ `color: inherit` porque o cabeçalho da etapa tem cor própria e a tinta é
   calculada (amarelo pede texto escuro, vermelho pede claro): cor fixa sumiria
   em uma das duas. O SVG usa `currentColor` e herda daqui. */
.kb-col-ordem {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; padding: 0; flex: 0 0 auto;
    border: none; background: none; color: inherit; opacity: .75;
    border-radius: 6px; cursor: pointer;
}
.kb-col-ordem:hover { opacity: 1; background: rgba(255, 255, 255, .22); }
.kb-col-ordem:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.crm-ordem-lista { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .8rem; }

/* ---- Planejamento: quadro de avisos do funil (abaixo do título) ---- */
.ck-aviso {
        border: 1px solid var(--card-border);
    border-left: 4px solid #e89c1e;
    background: #f5c57542;
    border-radius: var(--radius);
    padding: .8rem 1rem;
    margin-bottom: 1rem;
}
.ck-aviso-head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .4rem; }
.ck-aviso-tit { font-size: .82rem; font-weight: 700; color: var(--muted); }
.ck-aviso-quem { font-size: .76rem; color: var(--muted); margin-left: auto; }
/* O corpo é HTML sanitizado: herda o texto do tema e não fixa cor nenhuma. */
.ck-aviso-corpo { font-size: .92rem; line-height: 1.6; }
.ck-aviso-corpo > :first-child { margin-top: 0; }
.ck-aviso-corpo > :last-child { margin-bottom: 0; }
/* Vazio: só quem pode editar vê o convite, e ele não finge ser um aviso. */
.ck-aviso-vazio { border-left-color: var(--card-border); }

/* =====================================================================
   Tele Atendimento — busca do devedor e ficha de atendimento (.cb-*)

   ⚠️ SÓ TOKENS, nenhum hex de superfície: o modo escuro sai de graça, e é a
   regra que já quebrou em produção quando alguém escreveu #fff à mão. As
   três classes de acionamento usam fundo TRANSLÚCIDO + tinta `--alert-*-ink`
   (que muda por modo) — fundo translúcido com hex fixo reprova num dos dois
   modos (ver .badge-ok no CLAUDE.md).
   ===================================================================== */

/* ---- busca na barra de menu ---- */
.topbar-inner-call { justify-content: space-between; }
.topbar-inner-call .topnav { justify-content: flex-start; }
.cb-busca { position: relative; flex: 0 1 340px; min-width: 200px; margin-left: auto; }
.cb-busca-ico { position: absolute; left: .7rem; top: 50%; width: 16px; height: 16px; transform: translateY(-50%);
    fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.cb-busca input { width: 100%; padding: .5rem .8rem .5rem 2.1rem; border-radius: 999px; border: 1px solid transparent;
    background: var(--card); color: var(--text); font: inherit; font-size: .88rem; }
.cb-busca input:focus { outline: none; border-color: var(--control-border); box-shadow: 0 0 0 3px var(--ring); }
.cb-sug { position: absolute; right: 0; top: calc(100% + 6px); width: min(440px, 92vw); max-height: 420px; overflow-y: auto;
    background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; box-shadow: var(--shadow); z-index: 80; padding: .3rem; }
.cb-sug-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .8rem; padding: .55rem .7rem;
    border-radius: 8px; text-decoration: none; color: var(--text); }
.cb-sug-item:hover, .cb-sug-item.is-active { background: var(--primary-soft); }
.cb-sug-nome { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-sug-total { font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-sug-meta { grid-column: 1 / -1; font-size: .76rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-sug-vazio { padding: .8rem; font-size: .85rem; color: var(--muted); }
.cb-sug-todos { display: block; width: 100%; margin-top: .2rem; padding: .55rem; border: 0; border-top: 1px solid var(--card-border);
    background: none; color: var(--primary); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; border-radius: 0 0 8px 8px; }
.cb-sug-todos:hover { background: var(--primary-soft); }
@media (max-width: 760px) {
    .topbar-inner-call { flex-wrap: wrap; }
    .cb-busca { flex-basis: 100%; margin-left: 0; }
}

/* ---- resultados ---- */
.cb-vazio { text-align: center; padding-block: 2rem; }
.cb-vazio p { margin: .2rem 0; }
.cb-busca-grande { display: flex; gap: .5rem; max-width: 520px; margin: 1rem auto 0; }
.cb-busca-grande input { flex: 1; min-width: 0; padding: .6rem .8rem; border: 1px solid var(--control-border); border-radius: 10px;
    background: var(--card); color: var(--text); font: inherit; }
.cb-contagem { margin: 0 0 .6rem; }
.cb-resultados { display: grid; gap: .75rem; }
.cb-res { background: var(--card); border: 1px solid var(--card-border); border-left: 4px solid var(--primary); border-radius: 12px; padding: .9rem 1.1rem; }
.cb-res-atraso { border-left-color: var(--danger); }
.cb-res-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.cb-res-nome { font-size: 1.08rem; font-weight: 700; color: var(--primary); text-decoration: none; }
.cb-res-nome:hover { text-decoration: underline; }
.cb-res-total { font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-res-credor { margin: .15rem 0 .5rem; font-size: .88rem; color: var(--muted); }
.cb-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.cb-chip { display: inline-flex; gap: .3rem; align-items: baseline; padding: .15rem .55rem; border-radius: 6px; font-size: .78rem;
    background: var(--surface); color: var(--text); font-variant-numeric: tabular-nums; }
.cb-chip span { color: var(--muted); }
.cb-chip-alerta { background: rgba(220, 38, 38, .12); color: var(--alert-error-ink); }
.cb-chip-ok { background: rgba(16, 185, 129, .14); color: var(--alert-success-ink); }
.cb-res-rodape { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .7rem; padding-top: .6rem;
    border-top: 1px solid var(--card-border); }
.cb-res-ult { margin: 0; font-size: .82rem; color: var(--muted); }
.cb-res-ult strong { color: var(--text); }
@media (max-width: 560px) { .cb-res-rodape { flex-direction: column; align-items: stretch; } }

/* ---- pontos e tags de classe ---- */
.cb-ponto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); margin-right: .4rem; vertical-align: .05em; }
.cb-ponto-positivo { background: var(--success); }
.cb-ponto-negativo { background: var(--danger); }
.cb-ponto-neutro { background: var(--alert-info-ink); }
.cb-classe { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .76rem; font-weight: 600; }
.cb-classe-positivo { background: rgba(16, 185, 129, .14); color: var(--alert-success-ink); }
.cb-classe-negativo { background: rgba(220, 38, 38, .12); color: var(--alert-error-ink); }
.cb-classe-neutro { background: rgba(37, 99, 235, .12); color: var(--alert-info-ink); }
.cb-tag { display: inline-block; margin-left: .35rem; padding: .05rem .45rem; border-radius: 999px; font-size: .7rem; font-weight: 600;
    background: var(--surface); color: var(--muted); }
.cb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cb-num { font-variant-numeric: tabular-nums; }
.cb-mudo { color: var(--muted); font-size: .82rem; }

/* ---- ficha: cabeçalho ---- */
.cb-ficha-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.cb-ficha-head h1 { margin: .2rem 0 0; font-size: 1.5rem; }
.cb-voltar { font-size: .82rem; color: var(--muted); text-decoration: none; }
.cb-voltar:hover { color: var(--primary); }
.cb-ficha-sub { margin: .15rem 0 0; color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
.cb-ficha-valor { text-align: right; }
.cb-ficha-valor span { display: block; font-size: .76rem; color: var(--muted); }
.cb-ficha-valor strong { display: block; font-size: 1.6rem; line-height: 1.1; white-space: nowrap; }
.cb-ficha-valor em { font-style: normal; font-size: .8rem; font-weight: 600; color: var(--alert-error-ink); }
.cb-ficha { align-items: start; }

/* ---- ficha: abas (links) ---- */
.cb-abas { display: flex; gap: .15rem; overflow-x: auto; border-bottom: 1px solid var(--card-border); margin-bottom: -1px; scrollbar-width: thin; }
.cb-aba { flex: 0 0 auto; padding: .6rem .85rem; font-size: .86rem; font-weight: 600; color: var(--muted); text-decoration: none;
    border-bottom: 2px solid transparent; white-space: nowrap; }
.cb-aba:hover { color: var(--text); }
.cb-aba.is-ativa { color: var(--primary); border-bottom-color: var(--primary); }
.cb-aba-corpo { border-top-left-radius: 0; border-top-right-radius: 0; }
.cb-h2 { font-size: 1rem; margin: 1.4rem 0 .6rem; }
.cb-aba-corpo > .cb-h2:first-child, .cb-aba-corpo > form:first-child + .cb-h2 { margin-top: 0; }
.cb-acoes { display: flex; justify-content: flex-end; margin-top: .8rem; }
.cb-lt-vazio { padding: 1.2rem; text-align: center; color: var(--muted); background: var(--surface); border-radius: 10px; font-size: .88rem; }
.cb-textarea, .cb-acn-caixa textarea { width: 100%; padding: .6rem .75rem; border: 1px solid var(--control-border); border-radius: 10px;
    background: var(--card); color: var(--text); font: inherit; resize: vertical; }

/* ---- ficha: painel lateral ---- */
.cb-painel { position: sticky; top: 70px; padding: 1rem 1.1rem; }
.cb-campo { position: relative; padding: .55rem 0; border-bottom: 1px solid var(--card-border); min-width: 0; }
.cb-painel > .cb-campo:last-child { border-bottom: 0; }
.cb-rot { display: block; font-size: .72rem; font-weight: 600; color: var(--muted); margin-bottom: .1rem; }
.cb-val { display: block; font-size: .92rem; font-weight: 600; overflow-wrap: break-word; }
.cb-val-grande { font-size: 1.1rem; }
.cb-val-alerta { color: var(--alert-error-ink); }
.cb-copiar { position: absolute; right: 0; top: .5rem; padding: .1rem .45rem; border: 1px solid var(--control-border); border-radius: 6px;
    background: var(--card); color: var(--muted); font: inherit; font-size: .72rem; cursor: pointer; }
.cb-copiar:hover { color: var(--primary); border-color: var(--primary); }
.cb-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; border-bottom: 1px solid var(--card-border); }
.cb-duas > .cb-campo { border-bottom: 0; }
.cb-fixos { border: 1px solid var(--card-border); border-radius: 10px; padding: 0 .8rem; margin-bottom: 1rem; }
.cb-fones { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: .25rem; }
.cb-fones li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.cb-fones a { font-weight: 600; color: var(--primary); text-decoration: none; }
.cb-campo-destaque .cb-val { color: var(--primary); }
/* Contatos que vieram do arquivo (painel e aba Localização do atendimento). */
.cb-tel-origem { font-size: .7rem; }
.cb-usar { padding: .05rem .5rem; font-size: .72rem; }
.cb-emails { word-break: break-word; }
.cb-tel-st { display: inline-block; padding: .05rem .45rem; border-radius: 999px; font-size: .7rem; font-weight: 600; background: var(--surface); color: var(--muted); }
.cb-tel-valido { background: rgba(16, 185, 129, .14); color: var(--alert-success-ink); }
.cb-tel-invalido, .cb-tel-nao_perturbe { background: rgba(220, 38, 38, .12); color: var(--alert-error-ink); }
@media (max-width: 980px) { .cb-painel { position: static; } }

/* ---- aba Acionamento ---- */
.cb-acn-form { margin-bottom: .4rem; }
.cb-acn-caixa { position: relative; }
.cb-acn-caixa textarea { min-height: 88px; }
.cb-acn-caixa textarea:focus, .cb-textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.cb-tipos { position: absolute; left: 0; top: calc(100% + 4px); width: min(340px, 100%); max-height: 280px; overflow-y: auto; z-index: 30;
    background: var(--card); border: 1px solid var(--card-border); border-radius: 10px; box-shadow: var(--shadow); padding: .25rem; }
.cb-tipo { display: flex; align-items: center; width: 100%; padding: .45rem .6rem; border: 0; border-radius: 6px; background: none;
    color: var(--text); font: inherit; font-size: .82rem; text-align: left; cursor: pointer; }
.cb-tipo:hover, .cb-tipo.is-active { background: var(--primary-soft); }
.cb-tipo-vazio { padding: .6rem; font-size: .82rem; color: var(--muted); }
.cb-acn-pe { display: flex; align-items: flex-end; justify-content: space-between; gap: .8rem; margin-top: .6rem; flex-wrap: wrap; }
.cb-acn-tipo { flex: 1 1 260px; min-width: 0; }
.cb-acn-tipo label { display: block; font-size: .76rem; font-weight: 600; color: var(--muted); margin-bottom: .2rem; }
.cb-acn-tipo select { width: 100%; padding: .5rem .6rem; border: 1px solid var(--control-border); border-left-width: 4px; border-radius: 8px;
    background: var(--card); color: var(--text); font: inherit; }
.cb-acn-tipo select[data-classe="positivo"] { border-left-color: var(--success); }
.cb-acn-tipo select[data-classe="negativo"] { border-left-color: var(--danger); }
.cb-acn-tipo select[data-classe="neutro"] { border-left-color: var(--alert-info-ink); }
.cb-lt-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin: 1.4rem 0 .8rem; }
.cb-lt-head .cb-h2 { margin: 0; }
.cb-filtros { display: flex; flex-wrap: wrap; gap: .3rem; }
.cb-filtro { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .6rem; border: 1px solid var(--control-border); border-radius: 999px;
    font-size: .78rem; font-weight: 600; color: var(--muted); text-decoration: none; background: var(--card); }
.cb-filtro svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cb-filtro span { font-variant-numeric: tabular-nums; }
.cb-filtro-positivo { color: var(--alert-success-ink); }
.cb-filtro-negativo { color: var(--alert-error-ink); }
.cb-filtro-neutro { color: var(--alert-info-ink); }
.cb-filtro.is-ativo { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.cb-lt { list-style: none; margin: 0; padding: 0 0 0 1.9rem; position: relative; }
.cb-lt::before { content: ""; position: absolute; left: .85rem; top: .4rem; bottom: .4rem; width: 2px; background: var(--card-border); }
.cb-lt-dia { margin: 1rem 0 .4rem -1.9rem; padding-left: 2.6rem; font-size: .74rem; font-weight: 700; color: var(--muted); text-transform: capitalize; }
.cb-lt-dia:first-child { margin-top: 0; }
.cb-lt-item { position: relative; margin-bottom: .6rem; }
.cb-lt-no { position: absolute; left: -1.9rem; top: .55rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center;
    background: var(--card); border: 2px solid var(--card-border); }
.cb-lt-no svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cb-lt-positivo .cb-lt-no { color: var(--alert-success-ink); border-color: var(--success); }
.cb-lt-negativo .cb-lt-no { color: var(--alert-error-ink); border-color: var(--danger); }
.cb-lt-neutro .cb-lt-no { color: var(--alert-info-ink); border-color: var(--alert-info-ink); }
.cb-lt-card { margin-left: .4rem; padding: .6rem .8rem; border: 1px solid var(--card-border); border-radius: 10px; background: var(--card); }
.cb-lt-topo { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; }
.cb-lt-topo strong { font-size: .86rem; }
.cb-lt-topo time { font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-lt-texto { margin: .3rem 0 0; font-size: .88rem; overflow-wrap: anywhere; }
.cb-lt-autor { margin: .35rem 0 0; font-size: .76rem; color: var(--muted); }

/* ---- listas genéricas das abas ---- */
.cb-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.cb-lista-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: .7rem .85rem;
    border: 1px solid var(--card-border); border-radius: 10px; background: var(--card); }
.cb-lista-item > div:first-child { min-width: 0; }
.cb-lista-item.is-feito { opacity: .72; }
.cb-lista-texto { margin: .25rem 0 0; font-size: .88rem; overflow-wrap: anywhere; }
.cb-lista-item .cb-mudo { margin: .2rem 0 0; }
.cb-lista-acoes { display: flex; gap: .35rem; flex-wrap: wrap; flex-shrink: 0; }
.cb-ag-st { display: inline-block; margin-left: .4rem; padding: .05rem .45rem; border-radius: 999px; font-size: .7rem; font-weight: 600;
    background: var(--surface); color: var(--muted); }
.cb-ag-pendente { background: rgba(37, 99, 235, .12); color: var(--alert-info-ink); }
.cb-ag-feito { background: rgba(16, 185, 129, .14); color: var(--alert-success-ink); }
.cb-ag-atrasado { background: rgba(220, 38, 38, .12); color: var(--alert-error-ink); }
.cb-inline-form { display: flex; gap: .3rem; align-items: center; }
.cb-inline-form select { padding: .3rem .4rem; border: 1px solid var(--control-border); border-radius: 6px; background: var(--card); color: var(--text); font: inherit; font-size: .8rem; }
.cb-fone-link { font-weight: 600; color: var(--primary); text-decoration: none; }
.cb-endereco p { margin: .1rem 0; }
.cb-atraso { font-weight: 600; color: var(--alert-error-ink); }
.cb-extras { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .5rem 1rem; margin: 0; }
.cb-extras div { min-width: 0; }
.cb-extras dt { font-size: .72rem; font-weight: 600; color: var(--muted); text-transform: capitalize; }
.cb-extras dd { margin: 0; font-size: .88rem; overflow-wrap: anywhere; }
.cb-lista-item .cb-tag:first-of-type { margin-left: .4rem; }

/* ---- aba Financeiro ---- */
.cb-aging { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.cb-aging-item { padding: .6rem .75rem; border-radius: 10px; background: var(--surface); border-top: 3px solid var(--card-border); }
.cb-aging-item span { display: block; font-size: .74rem; color: var(--muted); }
.cb-aging-item strong { display: block; font-size: .98rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-aging-ate30 { border-top-color: var(--alert-warn-ink); }
.cb-aging-ate90, .cb-aging-mais90 { border-top-color: var(--danger); }
.cb-aging-a_vencer { border-top-color: var(--success); }
@media (max-width: 640px) { .cb-aging { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- aba Propostas ---- */
.cb-titulos { border: 1px solid var(--card-border); border-radius: 10px; padding: .6rem .8rem; margin: 0 0 1rem; }
.cb-titulos legend { padding: 0 .3rem; font-size: .8rem; font-weight: 600; color: var(--muted); }
.cb-titulos .check { display: flex; gap: .6rem; align-items: center; padding: .3rem 0; font-size: .86rem; }
.cb-titulo-op strong { margin-left: auto; }
.cb-todos { border-bottom: 1px solid var(--card-border); font-weight: 600; }
.cb-prop-soma { margin: .5rem 0 0; text-align: right; font-size: .88rem; }
.cb-prop-previa { margin: .6rem 0 0; padding: .5rem .7rem; border-radius: 8px; background: var(--primary-soft); color: var(--text); font-size: .86rem; }
.cb-prop { border: 1px solid var(--card-border); border-left: 4px solid var(--alert-info-ink); border-radius: 10px; padding: .8rem 1rem; margin-bottom: .6rem; }
.cb-prop-aceita, .cb-prop-quitada { border-left-color: var(--success); }
.cb-prop-recusada, .cb-prop-quebrada { border-left-color: var(--danger); }
.cb-prop-topo { display: flex; justify-content: space-between; gap: .8rem; flex-wrap: wrap; align-items: baseline; }
.cb-prop-st { font-weight: 700; font-size: .88rem; }
.cb-prop-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: .6rem 0; }
.cb-prop-numeros span { display: block; font-size: .72rem; color: var(--muted); }
.cb-prop-numeros strong { display: block; font-size: .95rem; }
.cb-prop-numeros em { display: block; font-style: normal; font-size: .74rem; color: var(--muted); }
@media (max-width: 640px) { .cb-prop-numeros { grid-template-columns: 1fr; } }
/* ⚠️ Entre 980 e 1200px o `.dash-row` empilha o `.col-8` e faz o `.col-4`
   virar metade — na ficha isso deixava o painel da dívida espremido num canto
   com meia tela vazia ao lado. Empilhado, ele ocupa a linha inteira. */
@media (max-width: 1200px) { .dash-row.cb-ficha > .col-4 { grid-column: span 12; } }

/* Botão claro/escuro: os DOIS ícones estão no HTML e a classe do <body> escolhe
   qual aparece — lua no claro, sol no escuro (o ícone mostra o destino). É o
   que deixa o `ui.js` trocar o modo por AJAX sem redesenhar o botão.
   ⚠️ Seletor com duas classes: `.conversas-link .ts-icon` declara
   `display: inline-flex` e venceria uma regra de classe só. */
.conversas-link .ts-tema-sol { display: none; }
body.tema-escuro .conversas-link .ts-tema-sol { display: inline-flex; }
body.tema-escuro .conversas-link .ts-tema-lua { display: none; }

/* =====================================================================
   Mapeamento de colunas: IA, chaves extras e prévia (.map-ia*, .map-chave*)
   Fundo translúcido + tinta `--alert-*-ink` (que muda por modo) — hex fixo
   sobre fundo translúcido reprova num dos dois modos.
   ===================================================================== */
.map-ia-barra { border-left: 4px solid var(--primary); }
.map-ia-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; flex-wrap: wrap; }
.map-ia-topo > div { min-width: 0; flex: 1 1 320px; }
.map-ia-resumo { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0 0 .6rem; padding: 0; }
.map-ia-resumo li { padding: .2rem .6rem; border-radius: 999px; font-size: .8rem; background: var(--surface); color: var(--text); }
/* Duas classes: vencem o `.map-ia-resumo li` acima (0,1,1) sem `!important`. */
.map-ia-resumo .map-ia-res-campos, .map-ia-resumo .map-ia-res-reaproveitadas { background: rgba(16, 185, 129, .14); color: var(--alert-success-ink); }
.map-ia-resumo .map-ia-res-duvida { background: rgba(217, 119, 6, .14); color: var(--alert-warn-ink); }
.map-ia-resumo .map-ia-res-novas { background: rgba(37, 99, 235, .12); color: var(--alert-info-ink); }
.map-ia { display: inline-block; margin-left: .4rem; padding: .05rem .45rem; border-radius: 999px; font-size: .7rem;
    font-weight: 700; vertical-align: .1em; cursor: help; white-space: nowrap; }
.map-ia-ok { background: rgba(16, 185, 129, .14); color: var(--alert-success-ink); }
.map-ia-duvida { background: rgba(217, 119, 6, .16); color: var(--alert-warn-ink); }
.map-ia-nova { background: rgba(37, 99, 235, .12); color: var(--alert-info-ink); }
.map-ia-cinza { background: var(--surface); color: var(--muted); }
.map-row-extra { align-items: start; }
.map-chave { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.map-chave input { width: 100%; }
.map-chave-st { font-size: .75rem; color: var(--muted); min-height: 1em; }
.map-chave-st.is-ok { color: var(--alert-success-ink); }
.map-chave-st.is-nova { color: var(--alert-info-ink); }
.map-chave-st.is-erro { color: var(--alert-error-ink); font-weight: 600; }
.map-prev-json { display: inline-block; padding: 0 .35rem; border-radius: 4px; font-size: .65rem; font-weight: 700;
    background: rgba(37, 99, 235, .12); color: var(--alert-info-ink); vertical-align: .1em; }
.map-cru summary { cursor: pointer; margin: 0; }
.map-cru[open] summary { margin-bottom: .8rem; }
/* Operadoras → Campos extras */
.cext-busca { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; }
.cext-busca input { flex: 1 1 260px; min-width: 0; padding: .5rem .7rem; border: 1px solid var(--control-border); border-radius: 8px;
    background: var(--card); color: var(--text); font: inherit; }
.cext-regras { margin: .4rem 0 1rem; padding-left: 1.2rem; font-size: .88rem; }
.cext-regras li { margin: .2rem 0; }

/* ---------------------------------------------------------------
   AVOX -- janela de discagem POR DIA (campanha nova)

   Uma linha por dia: [x] Nome | 09:00 as 20:00 | aviso.

   ⚠️ Tudo em TOKEN (--card, --control-border, --muted): o modo escuro vem de
   graca. Hex aqui seria mancha clara no escuro -- a armadilha ja registrada
   nas bolhas do chamado e do WhatsApp.
   --------------------------------------------------------------- */
.cp-janelas { display: flex; flex-direction: column; gap: .35rem; margin-top: .25rem; }

.cp-dia {
    display: grid;
    /* Nome fixo para as colunas de hora alinharem entre as sete linhas -- com
       `auto` o nome mais longo ("Quarta-feira") empurraria so a sua linha. */
    grid-template-columns: 170px auto 1fr;
    align-items: center;
    gap: .6rem;
    padding: .45rem .6rem;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    background: var(--card);
}

/* ⚠️ O `.field` na frente e obrigatorio: `.field label` (0,1,1) vence `.check`
   (0,1,0) e transformaria o nome do dia em rotulo de campo -- mesma correcao ja
   feita na `.member-grid`. */
.field .cp-janelas .check.cp-dia-nome {
    display: flex; align-items: center; gap: .5rem;
    margin: 0; font-size: .95rem; font-weight: 500; color: var(--text);
    text-transform: none; letter-spacing: normal; cursor: pointer;
}

.cp-dia-horas { display: flex; align-items: center; gap: .45rem; }

/* ⚠️ `width` explícito e `flex: 0 0 auto`: a grade vive dentro de um `.field`,
   e `.field input` declara `width: 100%` -- sem isto o campo de hora estica
   para 230px mostrando "09:00", e as sete linhas ficam com a cara de formulário
   mal montado (foi assim no primeiro render). */
.cp-dia-horas input[type="time"] {
    flex: 0 0 auto;
    width: 7.2rem;
    padding: .35rem .5rem; border: 1px solid var(--control-border); border-radius: 7px;
    background: var(--card); color: var(--text); font: inherit;
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
.cp-ate { color: var(--muted); font-size: .88rem; }

/* Dia desmarcado: esmaecido, NUNCA `disabled`. Campo desabilitado nao e enviado
   pelo navegador, e remarcar o dia perderia o horario que a pessoa digitou. */
.cp-dia.is-off { opacity: .5; }
.cp-dia.is-off .cp-dia-horas { filter: grayscale(1); }

.cp-dia-aviso { color: var(--alert-error-ink, var(--danger)); font-size: .82rem; }
.cp-dia.tem-erro { border-color: var(--danger); }

.cp-janelas-acoes {
    display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .5rem;
}

@media (max-width: 560px) {
    /* Empilha: 170px + dois campos de hora nao cabem em 360px. */
    .cp-dia { grid-template-columns: 1fr; gap: .35rem; }
}

/* ---------------------------------------------------------------
   AVOX -- graficos do painel

   ⚠️ O SVG vem do `App\Core\Chart`, com largura fixa (560px). Sem o
   `max-width: 100%` ele estoura a coluna em tela estreita, e a pagina inteira
   ganha barra horizontal -- o que a regra do projeto proibe fora de tabela.
   --------------------------------------------------------------- */
.avox-chart { min-height: 200px; }
.avox-chart svg { max-width: 100%; height: auto; display: block; }

/* O donut fica centrado na coluna estreita; a area ocupa a largura toda. */
.avox-chart-donut { display: flex; justify-content: center; }

.avox-atualizado { margin-top: .4rem; text-align: right; }


/* === MESA DE ATENDIMENTO (`/mesa`) ======================================
   O Tele Atendimento numa tela so: o softphone em BARRA fixa no topo, a faixa
   de indicadores, e a ficha do devedor ocupando a largura inteira.

   ⚠️⚠️ Reusa o bloco `.sf-*` inteiro — estado, cores, ponto pulsante, botoes,
   log. Aquele CSS foi escrito para a janelinha de 414px (uma COLUNA), e aqui
   ele vira BARRA: por isso as regras abaixo sao todas `.mesa-sf .sf-*`, e
   nenhuma toca o `.sf-*` original. Duplicar a folha criaria dois lugares para
   ajustar a mesma coisa, e a cor do estado (`--sf-cor`) deixaria de ter ponto
   unico — mexer no softphone passaria a exigir mexer aqui tambem.

   ⚠️ A classe do elemento `[data-sf-painel]` NAO pode vir daqui: o
   `softphone.js` faz `el.painel.className = "sf-painel is-" + estado` a cada
   mudanca, apagando qualquer outra. O layout em barra sai do container. */

.mesa-sf { display: grid; gap: .5rem; margin-bottom: 1rem; }

/* ⚠️ `position: sticky` (e nao `fixed`): fixo precisaria saber a altura do
   topstrip + barra de menu para nao passar por baixo deles, e essa altura muda
   com o tamanho da fonte e com o que o usuario tem permissao de ver ali. No
   fluxo, o proprio layout resolve. */
.mesa-sf .sf-painel {
    position: sticky;
    top: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "estado chamada acoes" "fim fim fim";
    align-items: center;
    /* ⚠️ O `.sf-painel` original tem `justify-items: center` — certo na
       janelinha VERTICAL de 414px, onde tudo se empilha centrado, e errado na
       barra: cada bloco ficava centrado na PRÓPRIA célula, abrindo um vão de
       centenas de pixels à esquerda do estado. */
    justify-items: stretch;
    gap: .5rem 1rem;
    text-align: left;
    padding: .7rem .9rem;
}

.mesa-sf-estado { grid-area: estado; display: flex; align-items: center; gap: .6rem; min-width: 0; }
.mesa-sf-estado > div { display: grid; min-width: 0; }

/* Na barra o estado divide espaco com a chamada e os botoes: o tamanho de
   1,35rem da janelinha empurraria os botoes para a linha de baixo. */
.mesa-sf .sf-estado-txt { font-size: 1.05rem; }
.mesa-sf .sf-explica    { max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mesa-sf-chamada { grid-area: chamada; justify-items: end; text-align: right; margin-top: 0; }
.mesa-sf .sf-numero     { font-size: 1.25rem; }
.mesa-sf .sf-cronometro { font-size: 1rem; }

.mesa-sf-acoes { grid-area: acoes; justify-content: flex-end; margin-top: 0; }
/* Cinco botoes na mesma linha: o `min-width: 9.5rem` da janelinha os jogaria
   para baixo em tela de 1366px. */
.mesa-sf .sf-btn { min-width: 0; padding: .5rem .9rem; font-size: .9rem; }

/* ⚠️ Vive no RODAPE (ver a nota na partial): na area `chamada` ele saia
   SOBREPOSTO ao nome de quem esta ligando. `margin-left: auto` o empurra para
   depois do nome do atendente, antes do "Encerrar posto". */
.mesa-sf-ficha { margin-left: auto; }

.mesa-sf-fim {
    grid-area: fim;
    display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem;
    font-size: .78rem; color: var(--muted);
    padding-top: .45rem;
    border-top: 1px solid var(--card-border);
}
/* Nome comprido nao pode empurrar o indicador de conexao para fora da barra. */
.mesa-sf-eu { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Sem `margin-left: auto`: quem empurra e o `.mesa-sf-ficha`, e com os
   dois o rodape ganharia dois vaos. */
.mesa-sf-sair { margin-left: .2rem; }
.mesa-sf-detalhes { padding: 0 .2rem; }

/* --- faixa de indicadores --- */
/* ⚠️ `minmax(0, ...)` nas duas trilhas: item de grid nasce `min-width: auto`, e
   um numero longo (R$ 1.284.930,00) alargaria a coluna em vez de caber nela. */
/* ⚠️ Vive DENTRO do modal (antes era faixa fixa da pagina, ~130px de altura
   roubados da ficha). Os filhos deixaram de ser `.card`: dentro de um modal, um
   cartao com borda e sombra viraria caixa dentro de caixa. */
.mesa-faixa {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 1.2rem;
}
.mesa-faixa > section { min-width: 0; }

.mesa-bloco-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; margin-bottom: .5rem;
    /* ⚠️ So um dos dois blocos tem botao ("Atualizar"), e ele e mais alto que o
       titulo sozinho: sem o piso, os dois cabecalhos do modal ficam ~8px
       desalinhados um do outro. */
    min-height: 2rem;
}
.mesa-bloco-head h2,
.mesa-bloco-head h3 {
    margin: 0; font-size: .8rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .06em; color: var(--muted);
}

/* ⚠️ O botao fica no rodape da barra do softphone e carrega o CONTADOR da
   fila: e o unico dado que nao pode ficar atras de um clique. Discreto (nao
   compete com "Atender"), mas com alvo de toque decente. */
.mesa-abrir {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .2rem .5rem; border-radius: 999px;
    border: 1px solid var(--control-border); background: var(--surface);
    font: inherit; font-size: .78rem; color: var(--text); cursor: pointer;
}
.mesa-abrir:hover { border-color: var(--primary); }

/* ⚠️ Tinta E fundo por MODO. Fundo translucido acompanha o tema e um hex fixo
   nao: e a armadilha ja registrada nos `.badge-*`. `--alert-warn-ink` ja e
   redefinido no bloco escuro, entao o par passa nos dois. */
.mesa-fila-n {
    font-variant-numeric: tabular-nums;
    font-weight: 700; font-size: .95rem;
    min-width: 1.9rem; text-align: center;
    padding: .1rem .45rem; border-radius: 999px;
    color: var(--pill-muted-ink); background: var(--pill-muted-bg);
}
.mesa-fila-n.is-alerta {
    color: var(--alert-warn-ink);
    background: color-mix(in srgb, var(--alert-warn-ink) 14%, transparent);
}

.mesa-fila-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.mesa-fila-lista li {
    display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
    font-size: .88rem; padding: .25rem .4rem; border-radius: 6px; background: var(--surface);
}
.mesa-fila-quem { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Tempo de espera: tabular para a coluna alinhar, e `nowrap` porque "12:04"
   quebrando no meio nao e um tempo.

   ⚠️ Tinta `--text`, NAO `--muted`: medido, `--muted` sobre `--surface` (o fundo
   desta linha) da 4,09:1 no modo claro e REPROVA em AA. E este numero nao e
   decoracao — e ele que diz se alguem esta esperando ha dois minutos ou ha
   vinte. A hierarquia vem do TAMANHO (.85rem contra .88rem do nome), que e mais
   acessivel que hierarquia por cor. */
.mesa-fila-esp {
    font-variant-numeric: tabular-nums; white-space: nowrap;
    color: var(--text); font-size: .85rem;
}

.mesa-kv {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: .6rem; margin: 0 0 .25rem;
    font-size: .88rem; color: var(--muted);
}
.mesa-kv strong {
    color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mesa-kv-destaque strong { font-size: 1.05rem; }

/* --- o miolo --- */
.mesa-vazio { text-align: center; }

/* ⚠️ Enquanto o fragmento chega, o conteudo ANTIGO continua na tela, apenas
   apagado: trocar por um skeleton piscaria a tela inteira a cada troca de aba,
   e quem esta atendendo perderia a referencia visual do que estava lendo. */
#mesa-ficha.is-carregando { opacity: .55; transition: opacity .12s linear; }
@media (prefers-reduced-motion: reduce) {
    #mesa-ficha.is-carregando { transition: none; }
}

/* --- estreito --- */
/* ⚠️ Abaixo de 1200px os botoes nao cabem ao lado do estado e da chamada: a
   barra vira duas linhas em vez de espremer. O sticky continua. */
@media (max-width: 1200px) {
    .mesa-sf .sf-painel {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "estado chamada" "acoes acoes" "fim fim";
    }
    .mesa-sf-acoes { justify-content: flex-start; }
}
@media (max-width: 900px) {
    .mesa-faixa { grid-template-columns: 1fr; }
    .mesa-sf .sf-painel {
        grid-template-columns: 1fr;
        grid-template-areas: "estado" "chamada" "acoes" "fim";
        /* Numa tela pequena a barra ocuparia metade da altura util: deixa de ser
           sticky para o trabalho continuar visivel. */
        position: static;
    }
    .mesa-sf-chamada { justify-items: start; text-align: left; }
    .mesa-sf .sf-explica { white-space: normal; }
}

/* ── Gravações (Operadoras → Gravações e o portal da operadora) ──────────
   ⚠️ O player vive DENTRO de uma célula de tabela, e `<audio>` nativo não tem
   largura própria: sem isto ele nasce com a largura que o navegador achar e
   estica a coluna, espremendo as vizinhas. A altura fixa é o que mantém as
   linhas da tabela iguais — um player por linha, todos do mesmo tamanho.
   ⚠️ Herda o esquema do tema (`color-scheme`), então os controles nativos já
   acompanham o modo escuro sem uma regra a mais. */
.grv-audio { width: 220px; max-width: 100%; height: 34px; display: block; }
@media (max-width: 900px) {
    /* Na tabela empilhada do celular a célula ocupa a linha toda. */
    .grv-audio { width: 100%; }
}
/* Envio por AJAX (gravacoes.js): a porcentagem fica DENTRO do modal, junto do
   formulário — o overlay de tela inteira esconderia o botão Cancelar, que é o
   que interrompe um upload de minutos. A largura da barra vem por CSSOM
   (`el.style.width`), que a CSP permite. */
.grv-progresso { display: grid; gap: .35rem; margin-top: .9rem; }
.grv-progresso[hidden] { display: none; }
.grv-progresso-barra { height: 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--card-border); overflow: hidden; }
.grv-progresso-barra span { display: block; height: 100%; width: 0; background: var(--primary); transition: width .2s ease; }
.grv-progresso-txt { font-size: .82rem; color: var(--text); font-variant-numeric: tabular-nums; }
/* A linha recém-enviada acende por alguns segundos e apaga devagar: é o que diz
   "foi esta" numa lista de dezenas de gravações parecidas.
   ⚠️ Escopo na lista de gravações: `.table tr > td` solto deixaria o hover de
   TODA tabela do sistema lento. */
[data-grv-lista] .table tr.grv-nova > td { background: var(--primary-soft); }
[data-grv-lista] .table tr > td { transition: background-color 1.2s ease; }
@media (prefers-reduced-motion: reduce) {
    .grv-progresso-barra span, [data-grv-lista] .table tr > td { transition: none; }
}
/* Envio de VÁRIAS gravações (gravacoes.js): área de arrastar e soltar + uma
   linha por arquivo, com data e hora ao lado do nome.
   ⚠️ A área NASCE escondida (`hidden`) e quem a mostra é o JS: sem script, o
   input de arquivo comum continua sendo o caminho — uma área de arrastar que
   não faz nada seria pior que nenhuma.
   ⚠️ Os textos ficam em `--text`, não em `--muted`: sobre `--surface` o cinza
   secundário fica abaixo de 4,5:1, e aqui ele é a instrução de uso. */
.grv-drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .3rem; padding: 1.4rem 1rem; text-align: center; cursor: pointer;
    border: 2px dashed var(--control-border); border-radius: var(--radius);
    background: var(--surface); color: var(--text);
    transition: border-color .15s ease, background-color .15s ease;
}
.grv-drop svg { color: var(--primary); }
.grv-drop:hover, .grv-drop.is-over { border-color: var(--primary); background: var(--primary-soft); }
.grv-drop.is-travado { opacity: .55; pointer-events: none; }
.grv-drop-tit { font-weight: 600; }
.grv-drop-sub { font-size: .85rem; }
.grv-drop-btn {
    padding: 0; border: 0; background: none; font: inherit; font-weight: 600;
    color: var(--primary); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.grv-drop-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }

/* A fila. Cabeçalho e linhas usam a MESMA grade — é o que alinha "Data da
   gravação" sobre os campos de data de todas as linhas. */
.grv-fila { margin-top: .9rem; border: 1px solid var(--card-border); border-radius: var(--radius); overflow: hidden; }
/* A fila (mesmo escondida) fica ENTRE dois `.form-grid`, e quebra o
   `.form-grid + .form-grid` que os espaçaria — o rótulo de baixo encostava na
   nota de cima. */
.grv-fila + .form-grid { margin-top: .9rem; }
.grv-fila-cab, .grv-item {
    display: grid; grid-template-columns: minmax(0, 1fr) 150px 108px 170px 32px;
    gap: .6rem; align-items: center; padding: .5rem .75rem;
}
.grv-fila-cab { background: var(--surface); font-size: .76rem; font-weight: 600; color: var(--text); }
.grv-item { position: relative; border-top: 1px solid var(--card-border); background: var(--card); }
.grv-item-arq { display: flex; flex-direction: column; min-width: 0; }
.grv-item-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grv-item-tam { font-size: .78rem; color: var(--text); opacity: .8; font-variant-numeric: tabular-nums; }
.grv-item input[type="date"], .grv-item input[type="time"] {
    width: 100%; min-width: 0; padding: .4rem .5rem; font: inherit; font-size: .88rem;
    border: 1px solid var(--control-border); border-radius: 8px;
    background: var(--surface); color: var(--text); outline: none;
}
.grv-item input:focus { border-color: var(--primary); background: var(--card); box-shadow: 0 0 0 3px var(--ring); }
.grv-item input.is-erro { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent); }
.grv-item input:disabled { opacity: .7; }
.grv-item-status { font-size: .8rem; line-height: 1.3; color: var(--text); font-variant-numeric: tabular-nums; }
.grv-item[data-estado="ok"] .grv-item-status { color: var(--alert-success-ink); font-weight: 600; }
.grv-item[data-estado="erro"] .grv-item-status,
.grv-item[data-estado="invalido"] .grv-item-status { color: var(--alert-error-ink); font-weight: 600; }
.grv-item[data-estado="invalido"] { background: color-mix(in srgb, var(--danger) 6%, var(--card)); }
.grv-item-x {
    width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
    padding: 0; border: 1px solid var(--control-border); border-radius: 50%;
    background: var(--card); color: var(--text); font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.grv-item-x:hover { border-color: var(--danger); color: var(--danger); }
.grv-item-x:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.grv-item-x:disabled { opacity: .4; cursor: default; }
/* A barra de cada arquivo corre no rodapé da própria linha e só aparece
   enquanto ele sobe — nas outras linhas ela ficaria como um traço sem sentido. */
.grv-item-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.grv-item-barra span { display: block; height: 100%; width: 0; background: var(--primary); transition: width .2s ease; }
.grv-item:not([data-estado="enviando"]) .grv-item-barra { display: none; }
@media (max-width: 760px) {
    /* No celular a linha empilha: nome em cima, data e hora lado a lado, e a
       situação embaixo — o cabeçalho de colunas deixa de fazer sentido. */
    .grv-fila-cab { display: none; }
    .grv-item { grid-template-columns: 1fr 1fr 32px; }
    .grv-item-arq { grid-column: 1 / 3; }
    .grv-item-x { grid-column: 3; grid-row: 1; }
    .grv-item-status { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
    .grv-drop, .grv-item-barra span { transition: none; }
}

/* A mesma fila SEM data por arquivo (Operadoras → Arquivos, `data-grv-sem-data`):
   só nome, situação e o ×. Seletor com o container na frente para vencer a
   grade de cinco colunas das Gravações sem depender da ordem no arquivo. */
.grv-fila-sem-data .grv-fila-cab,
.grv-fila-sem-data .grv-item { grid-template-columns: minmax(0, 1fr) 200px 32px; }
@media (max-width: 760px) {
    .grv-fila-sem-data .grv-item { grid-template-columns: minmax(0, 1fr) 32px; }
    .grv-fila-sem-data .grv-item-arq { grid-column: 1; }
    .grv-fila-sem-data .grv-item-x { grid-column: 2; grid-row: 1; }
}

/* Operadoras → Arquivos e o menu Arquivos do portal. Nome do arquivo e o tamanho
   embaixo; quem baixou por último ao lado do selo. "Novo" é azul (o portal não tem
   modo escuro): #1a63d6 sobre #e7f0ff mede ~4,9:1. */
.ae-nome { display: block; font-weight: 600; overflow-wrap: anywhere; }
.ae-tam { display: block; font-size: .78rem; }
/* Quem enviou o arquivo da pasta (mig. 155). Tinta por MODO (fundo translúcido). */
.ae-origem {
    display: inline-block; padding: .08rem .45rem; border-radius: 999px;
    font-size: .72rem; font-weight: 700; color: var(--pill-muted-ink); background: var(--pill-muted-bg);
}
.ae-origem-op { color: var(--alert-info-ink); background: rgba(29, 78, 216, .10); }
.ae-quem { display: block; margin-top: .2rem; font-size: .8rem; color: var(--text); }
.pill.ae-novo { background: #e7f0ff; color: #1a63d6; }
body.tema-escuro .pill.ae-novo { background: color-mix(in srgb, #6ea0ff 18%, transparent); color: #a9c6ff; }

/* Categoria do arquivo (mig. 151): etiqueta discreta acima do nome. Contorno e
   tinta de TEXTO (não a cor da marca): é rótulo de organização, e não pode
   competir com o selo "Novo"/"Baixado" da coluna ao lado. */
.ae-cat {
    display: inline-block; margin-bottom: .2rem; padding: .05rem .5rem;
    border: 1px solid var(--control-border); border-radius: 999px;
    font-size: .74rem; font-weight: 600; color: var(--text);
}
.ae-cat-sem { font-weight: 400; color: var(--muted); border-style: dashed; }
.ae-acoes-topo { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* Gerenciar categorias: uma linha por categoria com dois blocos de formulários
   IRMÃOS (salvar · ↑↓ excluir) — formulário aninhado não existe em HTML. */
.aec-nova { display: flex; gap: .5rem; margin: .25rem 0 1rem; }
/* Fora de um `.field`, campo de texto não recebe estilo nenhum: o visual do
   `.field input` repetido aqui, só que mais baixo (é uma linha de lista). */
.aec-nova input[type="text"], .aec-editar input[type="text"] {
    flex: 1 1 auto; min-width: 0;
    padding: .5rem .7rem; font-size: .92rem; color: var(--text);
    background: var(--surface); border: 1px solid var(--control-border); border-radius: 9px; outline: none;
}
.aec-nova input[type="text"]:focus, .aec-editar input[type="text"]:focus {
    border-color: var(--primary); background: var(--card); box-shadow: 0 0 0 3px var(--ring);
}
.aec-lista { display: grid; gap: .45rem; }
.aec-linha {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5rem;
    padding: .45rem .6rem; border: 1px solid var(--card-border); border-radius: 10px;
}
.aec-editar { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.aec-editar .check { flex: 0 0 auto; margin: 0; }
.aec-uso { flex: 0 0 5.6rem; margin: 0; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
/* Três vagas FIXAS (↑ · ↓ · Excluir), com vaga vazia quando o botão não se
   aplica: sem isso o campo do nome mudava de largura de linha para linha. */
.aec-mais { display: grid; grid-template-columns: 2.4rem 2.4rem 5.2rem; gap: .3rem; align-items: center; }
.aec-mais form { margin: 0; }
.aec-mais .btn-sm { width: 100%; padding-inline: .3rem; }
@media (max-width: 560px) {
    .aec-linha { grid-template-columns: minmax(0, 1fr); }
    .aec-editar { flex-wrap: wrap; }
    .aec-editar input[type="text"] { flex-basis: 100%; }
    .aec-mais { justify-content: end; }
}

/* ==========================================================================
   Selos das lojas do app (Sistema → Aplicativo) — topo e rodapé
   A imagem é a do selo oficial (preta, com texto branco); o tamanho é fixo
   pela ALTURA para os dois selos alinharem mesmo com proporções diferentes.
   ========================================================================== */
.app-lojas { display: inline-flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.app-loja { display: inline-flex; border-radius: 7px; line-height: 0; transition: transform .15s, opacity .15s; }
.app-loja:hover { transform: translateY(-1px); opacity: .9; }
.app-loja:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.app-loja img { height: 34px; width: auto; max-width: 130px; object-fit: contain; }
.app-lojas-topo .app-loja img { height: 30px; max-width: 110px; }
/* No celular o topo não tem espaço: os selos ficam só no rodapé. */
@media (max-width: 900px) { .app-lojas-topo { display: none; } }

/* Rodapé: texto à esquerda, selos à direita. */
body.has-nav .app-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    max-width: 1700px;
    margin: 0 auto;
    text-align: left;
}
@media (max-width: 640px) {
    body.has-nav .app-footer { justify-content: center; text-align: center; }
}

/* Prévia do selo na tela de configuração: fundo neutro, porque o selo
   oficial é preto e sumiria no cartão escuro. */
.app-loja-previa {
    display: flex; align-items: center; justify-content: center;
    min-height: 72px; margin-bottom: .9rem; padding: .75rem;
    border: 1px dashed var(--card-border); border-radius: 10px; background: var(--surface);
}
.app-loja-previa img { max-height: 56px; max-width: 220px; }

/* ==========================================================================
   Barra do menu em ONDA — em todas as telas do layout `authenticated`
   (`body.menu-onda`). Mesmo desenho do topo do app e do
   painel de login: degradê, ondas finas, pontos e a borda de baixo curva.
   ⚠️⚠️ O desenho mora num `::before`, NUNCA no próprio `.topbar`: a borda
   curva é uma MÁSCARA, e máscara recorta os DESCENDENTES — no `.topbar` ela
   cortaria os dropdowns do menu, que abrem para baixo, fora da barra.
   ⚠️ A barra deixa de ser `sticky`: com a faixa curva mais alta, ela cobriria
   o conteúdo ao rolar, e a parte transparente da onda capturaria o clique.
   ========================================================================== */
body.menu-onda .topbar {
    position: relative;
    isolation: isolate;
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
}
/* ⚠️ A faixa curva é compensada pela margem NEGATIVA: ela se sobrepõe ao
   respiro de cima do `.app-main` (2rem), então a barra cresce só ~0,5rem no
   layout. Sem isso, as telas de altura calculada (Conversas, Aninha,
   WhatsApp — `calc(100dvh - 150px)` e afins) ganhariam uma rolagem de ~45px. */
body.menu-onda .topbar-inner-menu { padding-top: .9rem; padding-bottom: 2.9rem; }
body.menu-onda .topbar { margin-bottom: -2rem; }
body.menu-onda .topbar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.14' stroke-width='1.2'%3E%3Cpath d='M-20 40 C 80 10, 160 80, 260 40 S 440 20, 460 70'/%3E%3Cpath d='M-20 58 C 80 28, 160 98, 260 58 S 440 38, 460 88'/%3E%3Cpath d='M-40 100 C 60 70, 150 140, 250 100 S 430 80, 470 130'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat,
        linear-gradient(to right, #1552d0, #00af52);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V100Q55 72 0 62Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V100Q55 72 0 62Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
/* A grade de pontos do canto direito (o `::before` já está ocupado). */
body.menu-onda .topbar::after {
    content: "";
    position: absolute;
    /* Na faixa curva, ABAIXO dos links: no alto ela encostava no último
       item do menu (visto no render com 9 itens). */
    bottom: .7rem; right: 5%;
    width: 92px; height: 28px;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(rgba(255, 255, 255, .5) 1.5px, transparent 1.6px) 0 0 / 13px 13px;
}
body.tema-escuro.menu-onda .topbar { background: transparent; }
body.tema-escuro.menu-onda .topbar::before {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.08' stroke-width='1.2'%3E%3Cpath d='M-20 40 C 80 10, 160 80, 260 40 S 440 20, 460 70'/%3E%3Cpath d='M-40 100 C 60 70, 150 140, 250 100 S 430 80, 470 130'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat,
        #323232;
}
@media (max-width: 640px) {
    body.menu-onda .topbar-inner-menu { padding-bottom: 2.4rem; }
    body.menu-onda .topbar { margin-bottom: -1.5rem; }
    body.menu-onda .topbar::after { display: none; }
}
@media print { body.menu-onda .topbar::before, body.menu-onda .topbar::after { display: none; } }

/* ==========================================================================
   Quadro de boas-vindas da Dashboard Geral (dashboard/index.php): a data num
   bloco à esquerda, na cor da marca, e a saudação ao lado. Tokens de tema,
   então acompanha o modo escuro sem regra própria.
   ========================================================================== */
.bv-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin: 0 0 1.25rem;
    padding: 1.1rem 0 rem;

}
.bv-data {
    flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 84px; height: 84px;
    border-radius: 16px;
    color: #fff;
    /* O degradê da barra do menu com a ponta verde mais FECHADA: o mês/ano é
       texto de 12px, e branco sobre o #00af52 da barra fica abaixo de 3:1. */
    background-image: linear-gradient(135deg, #1552d0, #0b7a44);
}
.bv-dia { font-size: 2.1rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.bv-mes { margin-top: .3rem; font-size: .74rem; font-weight: 700; letter-spacing: .02em; opacity: .92; }
.bv-texto { min-width: 0; }
.bv-semana { margin: 0 0 .15rem; font-size: .85rem; color: var(--muted); }
.bv-titulo { margin: 0; font-size: 1.5rem; line-height: 1.2; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.bv-sub { margin: .25rem 0 0; font-size: .92rem; color: var(--muted); }
body.tema-escuro .bv-data { background: #323232; }
@media (max-width: 640px) {
    .bv-card { gap: .9rem; padding: .9rem 1rem; }
    .bv-data { width: 64px; height: 64px; border-radius: 13px; }
    .bv-dia { font-size: 1.6rem; }
    .bv-titulo { font-size: 1.2rem; }
    .bv-sub { display: none; }
}

/* ==========================================================================
   Recepção (`app/Views/recepcao/*`, mig. 140) — só tokens do tema, então o
   modo escuro vem de graça. As fotos de pessoa são imagem, não superfície:
   ficam com a cor original nos dois modos.
   ========================================================================== */
.rcp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.rcp-head > div { min-width: 0; }
.rcp-stats { margin-bottom: 1rem; }
.rcp-sub { margin: 1.1rem 0 .55rem; font-size: 1rem; font-weight: 700; }

/* Listas de ação (painel, para mim, resultados da busca). */
.rcp-lista { list-style: none; margin: 0; padding: 0; }
.rcp-lista > li {
    display: flex; align-items: center; gap: .75rem;
    padding: .6rem 0; border-bottom: 1px solid var(--card-border);
}
.rcp-lista > li:last-child { border-bottom: 0; }
.rcp-lista > li.is-alerta { border-left: 3px solid var(--danger); padding-left: .6rem; }
.rcp-lista-hora { flex: 0 0 auto; min-width: 3.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.rcp-lista-txt { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.rcp-lista-sub { display: block; margin-top: .1rem; }
.rcp-recados > li { align-items: flex-start; }
.rcp-recados > li.is-novo .rcp-lista-txt > strong { color: var(--primary); }
.rcp-recado-msg { display: block; margin: .25rem 0; }
.rcp-acoes { display: inline-flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; }

.rcp-avatar {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
    object-fit: cover; background: var(--surface); border: 1px solid var(--card-border);
}
.rcp-avatar-vazio { display: inline-block; }
.rcp-pessoa { display: inline-flex; align-items: center; gap: .6rem; }
.rcp-row-alerta td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.rcp-saida { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.rcp-bloq { color: var(--danger); font-weight: 700; }
.rcp-dia td { background: var(--surface); font-weight: 700; font-size: .85rem; color: var(--muted); }

/* Modal de entrada. */
.rcp-ag-info {
    margin: 0 0 1rem; padding: .7rem .9rem; border-radius: 10px;
    background: var(--primary-soft); border: 1px solid var(--card-border);
}
.rcp-busca > label { display: block; font-weight: 600; margin-bottom: .35rem; }
.rcp-busca-linha { display: flex; gap: .5rem; }
.rcp-busca-linha input { flex: 1 1 auto; min-width: 0; }
.rcp-resultados { margin-top: .75rem; }
.rcp-ou { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--card-border); }
.rcp-vis-resumo {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .75rem;
    padding: .75rem .9rem; border-radius: 10px; border: 1px solid var(--card-border); background: var(--surface);
}
.rcp-vis-resumo.is-bloqueado { border-color: var(--danger); }
.rcp-vis-resumo .rcp-bloq { flex-basis: 100%; }
.rcp-privacidade {
    margin-top: 1rem; padding: .75rem .9rem; border-radius: 10px;
    border: 1px solid var(--card-border); background: var(--surface); font-size: .9rem;
}
.rcp-privacidade p { margin: 0 0 .5rem; color: var(--muted); }

/* Câmera: prévia 4:3 com a mesma altura nas duas colunas. */
.rcp-fotos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1rem; }
.rcp-cam { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.rcp-cam-rotulo { font-size: .82rem; font-weight: 600; color: var(--muted); }
.rcp-cam-area {
    /* ⚠️ Largura LIMITADA: na coluna inteira do modal (~570px) a prévia 4:3
       passava de 400px de altura e empurrava a visita para fora da tela. */
    position: relative; aspect-ratio: 4 / 3; width: 100%; max-width: 320px; border-radius: 12px; overflow: hidden;
    background: var(--surface); border: 1px dashed var(--control-border);
    display: flex; align-items: center; justify-content: center;
}
.rcp-cam-area video, .rcp-cam-area img { width: 100%; height: 100%; object-fit: cover; }
.rcp-cam-area video[hidden], .rcp-cam-area img[hidden] { display: none; }
.rcp-cam-vazio { color: var(--muted); font-size: .9rem; }
.rcp-cam-erro { margin: 0; color: var(--danger); font-size: .85rem; }
.rcp-cam-acoes { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.rcp-cam-acoes select { max-width: 100%; }
.rcp-cam-arquivo { font-size: .8rem; color: var(--muted); }
.rcp-cam .field-note { font-size: .8rem; color: var(--muted); }
/* Opções da retirada: o nome da opção é CONTEÚDO. Sem isto `.field label`
   (0,1,1) vence `.check` e as opções saem com a cara de rótulo de campo —
   cinza, pequenas e sem o flex que alinha a bolinha ao texto. */
.field.rcp-quem .check { display: flex; align-items: center; font-size: .9rem; font-weight: 400; color: var(--text); margin: .35rem 0; }
.rcp-quem-tit { display: block; font-size: .82rem; font-weight: 600; color: var(--muted); margin-bottom: .2rem; }
.rcp-cam input[type="file"] { font-size: .85rem; max-width: 100%; }

/* Ficha do visitante. */
.rcp-ficha-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.rcp-ficha-fotos figure { margin: 0; }
.rcp-ficha-fotos img, .rcp-ficha-fotos .rcp-cam-vazio {
    display: flex; align-items: center; justify-content: center;
    width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px;
    background: var(--surface); border: 1px solid var(--card-border);
}
.rcp-ficha-fotos figcaption { font-size: .8rem; color: var(--muted); margin-top: .3rem; text-align: center; }
.rcp-ficha-acoes { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.rcp-bloqueio { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.rcp-bloqueio input[type="text"] { flex: 1 1 200px; min-width: 0; }
.rcp-eventos { margin-top: 1rem; font-size: .85rem; }
.rcp-eventos summary { cursor: pointer; color: var(--muted); }
.rcp-eventos ul { margin: .5rem 0 0; padding-left: 1.1rem; color: var(--muted); }

/* Lista de evacuação (impressão). */
.rcp-evac { max-width: 980px; margin: 0 auto; padding: 1.5rem 1rem; }
.rcp-evac-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.rcp-evac-head h1 { margin: 0; }
.rcp-evac-head p { margin: .2rem 0 0; color: var(--muted); }
.rcp-evac-box { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--text); border-radius: 3px; }

@media (max-width: 640px) {
    .rcp-ficha-fotos { grid-template-columns: 1fr 1fr; }
    .rcp-busca-linha { flex-direction: column; }
}

/* ── Perfis ADICIONAIS do usuário (mig. 141) ─────────────────────────────────
   Na lista, o adicional se distingue do principal pela borda tracejada e pelo
   "+": é acesso a mais, só daquela pessoa. Define a PRÓPRIA tinta (texto do
   tema sobre fundo transparente), então acompanha claro e escuro. */
.pill.pill-extra {
    background: transparent;
    color: var(--text);
    border: 1px dashed var(--control-border);
    font-weight: 500;
    margin-left: .2rem;
}
/* O perfil escolhido como principal some da grade. ⚠️ Seletor forte de
   propósito: `.field .member-grid .check` declara `display: flex`, que vence o
   `[hidden]` do navegador — sem isto o item "escondido" continuaria na tela. */
.field[data-perfis-extras] .member-grid .check[hidden] { display: none; }

/* ==========================================================================
   Backoffice » Negativação » Manuais (mig. 144)
   ========================================================================== */

/*
 * Tabelas e `h4` no conteúdo formatado. ⚠️ Valem para TODO `.rte-content` do
 * sistema (artigos, avisos, régua, aviso do funil): o sanitizador passou a
 * aceitar tabela junto com os manuais, e sem esta regra ela sairia sem borda
 * nenhuma — células coladas, ilegíveis. Só tokens: acompanha o modo escuro.
 */
.rte-content h4 { font-size: 1rem; margin: .8rem 0 .35rem; }
.rte-content li > p { margin: 0; }
.rte-content table { border-collapse: collapse; margin: .7rem 0; min-width: 50%; }
.rte-content th, .rte-content td {
    border: 1px solid var(--card-border); padding: .4rem .6rem; vertical-align: top; text-align: left;
}
.rte-content th { background: var(--surface); font-weight: 700; }
.rte-content td > p, .rte-content th > p { margin: 0; }
.rte-content td > p + p, .rte-content th > p + p { margin-top: .35rem; }

.nman-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.nman-head-acoes { display: flex; gap: .5rem; flex-wrap: wrap; }
.nman-voltar { margin: 0 0 .6rem; font-size: .88rem; }
.nman-voltar a { color: var(--muted); text-decoration: none; }
.nman-voltar a:hover { color: var(--primary); text-decoration: underline; }
.nman-opc { color: var(--muted); font-weight: 400; }
.nman-vazio { color: var(--muted); }
.nman-link-disc { color: var(--muted); font-size: .86rem; }
.nman-link-disc:hover { color: var(--primary); }

/* ---- busca ---- */
.nman-busca { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.nman-busca input[type="search"] {
    flex: 1 1 320px; min-width: 0; padding: .7rem .95rem; font-size: 1rem;
    border: 1px solid var(--control-border); border-radius: var(--radius); background: var(--card); color: var(--text);
}
.nman-busca input[type="search"]:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }

.nman-importar {
    margin: 0 0 1.25rem; border: 1px dashed var(--control-border); border-radius: var(--radius);
    background: var(--card); padding: .6rem .9rem;
}
.nman-importar > summary { cursor: pointer; font-weight: 600; color: var(--primary); }
.nman-importar-form { display: grid; gap: .6rem; margin-top: .6rem; justify-items: start; }
.nman-importar-form .hint { margin: 0; max-width: 70ch; }

.nman-sec-tit { font-size: 1rem; margin: 0 0 .75rem; }
.nman-lista-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ---- resultados ---- */
.nman-resultados { margin: 0 0 1.75rem; }
.nman-res-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.nman-res {
    background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius);
    padding: .8rem 1rem;
}
.nman-res-tit { font-weight: 700; font-size: 1.02rem; color: var(--primary); text-decoration: none; }
.nman-res-tit:hover { text-decoration: underline; }
.nman-res-trecho { margin: .35rem 0; line-height: 1.55; overflow-wrap: anywhere; }
.nman-res-meta { margin: 0; color: var(--muted); font-size: .8rem; }

/*
 * ⚠️ O destaque define FUNDO E TINTA: `<mark>` herda a cor do texto, e no modo
 * escuro o texto claro sobre o amarelo sumiria. Medido: 11,6:1.
 */
.nman-res-trecho mark, .nman-mark { background: #fde68a; color: #3b2a00; border-radius: 3px; padding: 0 .1em; }
.nman-mark.is-atual { background: #f59e0b; color: #1f1300; box-shadow: 0 0 0 2px #f59e0b; }

/* ---- cartões ---- */
.nman-cards { margin-top: 0; }
.nman-card {
    height: 100%; display: flex; flex-direction: column; gap: .35rem;
    background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius);
    padding: 1rem 1.1rem; box-sizing: border-box;
}
.nman-card.is-arquivado { opacity: .72; }
.nman-card.is-rascunho { border-style: dashed; }
.nman-card-tit { margin: 0; font-size: 1.08rem; line-height: 1.3; }
.nman-card-tit a { color: var(--text); text-decoration: none; }
.nman-card-tit a:hover { color: var(--primary); text-decoration: underline; }
.nman-card-resumo { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.nman-card-meta { margin: 0; color: var(--muted); font-size: .8rem; }
.nman-card-selos { display: flex; flex-wrap: wrap; gap: .3rem; min-height: 0; }
.nman-card-selos:empty { display: none; }
.nman-card-acoes { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: .5rem; }
.nman-vazio-card {
    background: var(--card); border: 1px dashed var(--control-border); border-radius: var(--radius);
    padding: 1.5rem; text-align: center;
}
.nman-vazio-card p { margin: 0 0 .5rem; }

/* Selos: cada um define fundo E tinta (sobrevive ao modo escuro sem regra). */
.nman-selo {
    display: inline-block; padding: .12rem .5rem; border-radius: 999px;
    font-size: .72rem; font-weight: 600; line-height: 1.5;
}
.nman-selo-rasc { background: var(--pill-muted-bg); color: var(--pill-muted-ink); }
.nman-selo-arq  { background: var(--pill-muted-bg); color: var(--pill-muted-ink); }
.nman-selo-pend { background: #fef3c7; color: #92400e; }
.nman-selo-novo { background: #e7f6ec; color: #1a7f42; }

/* ---- avisos ---- */
.nman-aviso {
    display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .8rem;
    background: var(--surface); border: 1px solid var(--card-border); border-left: 4px solid var(--primary);
    border-radius: var(--radius); padding: .65rem .9rem; margin: 0 0 1rem; font-size: .9rem;
}
.nman-aviso-rasc { border-left-color: #b7791a; }
.nman-aviso-lista { margin: .25rem 0 0; padding-left: 1.2rem; flex-basis: 100%; }
.nman-aviso-lista li + li { margin-top: .2rem; }

/* ---- leitura ---- */
.nman-doc-head {
    display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem;
    margin: 0 0 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--card-border);
}
.nman-doc-head h1 { margin: 0 0 .3rem; font-size: 1.7rem; line-height: 1.2; }
.nman-doc-head-txt { min-width: 0; flex: 1 1 420px; }
.nman-doc-resumo { margin: 0 0 .35rem; color: var(--muted); font-size: 1rem; }
.nman-doc-meta { margin: 0; color: var(--muted); font-size: .84rem; }
.nman-doc-acoes { display: flex; flex-wrap: wrap; gap: .5rem; }

.nman-achados {
    position: sticky; top: .5rem; z-index: 6;
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: .45rem .7rem; margin: 0 0 1rem; font-size: .88rem;
}
.nman-achados [data-nman-achados-txt] { flex: 1 1 auto; }

.nman-ler { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 2rem; align-items: start; }
.nman-ler.sem-sumario { grid-template-columns: minmax(0, 1fr); }
.nman-sumario {
    position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto;
    border-right: 1px solid var(--card-border); padding-right: 1rem;
}
.nman-sumario summary {
    cursor: pointer; font-size: .78rem; font-weight: 700; letter-spacing: .02em;
    color: var(--muted); margin-bottom: .5rem; list-style: none;
}
.nman-sumario summary::-webkit-details-marker { display: none; }
.nman-sum-lista { list-style: none; margin: 0; padding: 0; font-size: .87rem; line-height: 1.35; }
.nman-sum-lista li { margin: 0; }
.nman-sum-lista a {
    display: block; padding: .3rem .5rem; border-left: 2px solid transparent;
    color: var(--text); text-decoration: none; border-radius: 0 6px 6px 0;
}
.nman-sum-lista a:hover { background: var(--surface); color: var(--primary); }
.nman-sum-lista a.is-atual { border-left-color: var(--primary); color: var(--primary); font-weight: 600; background: var(--primary-soft); }
.nman-sum-n2 > a { font-weight: 600; }
.nman-sum-n3 > a { padding-left: 1.1rem; }
.nman-sum-n4 > a { padding-left: 1.8rem; font-size: .84rem; color: var(--muted); }

.nman-doc { max-width: 880px; font-size: 1rem; line-height: 1.7; overflow-wrap: break-word; }
.nman-doc h2 {
    font-size: 1.3rem; margin: 2rem 0 .7rem; padding-top: 1.1rem;
    border-top: 1px solid var(--card-border); scroll-margin-top: 1rem;
}
.nman-doc > h2:first-child { border-top: 0; padding-top: 0; }
.nman-doc h3 { font-size: 1.08rem; margin: 1.4rem 0 .5rem; scroll-margin-top: 1rem; }
.nman-doc h4 { font-size: 1rem; margin: 1.1rem 0 .4rem; scroll-margin-top: 1rem; }
.nman-doc ol, .nman-doc ul { padding-left: 1.7rem; }
.nman-doc li + li { margin-top: .2rem; }
.nman-doc img { display: block; margin: .6rem 0; border: 1px solid var(--card-border); }
.nman-tabela { overflow-x: auto; margin: .7rem 0; }
.nman-tabela > table { margin: 0; }
/* O "#" que copia o link da seção: aparece ao passar o mouse ou com o foco. */
.nman-ancora {
    margin-left: .45rem; font-weight: 400; color: var(--muted); text-decoration: none;
    opacity: 0; transition: opacity .15s;
}
.nman-doc h2:hover .nman-ancora, .nman-doc h3:hover .nman-ancora, .nman-doc h4:hover .nman-ancora,
.nman-ancora:focus-visible { opacity: 1; }
@media (hover: none) { .nman-ancora { opacity: .6; } }

/* ---- versões ---- */
.nman-ver-tabela tr.is-aberta td { background: var(--primary-soft); }
.nman-ver-acoes { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.nman-ver-acoes form { margin: 0; }
.nman-ver-conteudo { margin-top: 1.75rem; }
.nman-ver-tit { margin: 0 0 .3rem; font-size: 1.4rem; }

/* ---- editor ---- */
.nman-editor-grade { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 1.5rem; align-items: start; }
.nman-editor .field input[type="text"] { font-size: 1rem; }
#nman-titulo { font-size: 1.15rem; font-weight: 600; }
/*
 * ⚠️ O `.rte` padrão tem `overflow: hidden` (cantos arredondados) e a área rola
 * por dentro, com `max-height: 55vh`. Num manual inteiro isso vira uma janelinha
 * com barra de rolagem própria: aqui a PÁGINA rola, e a barra de formatação fica
 * presa no topo enquanto isso. `overflow: hidden` impediria o `sticky`.
 */
.nman-rte { overflow: visible; }
.nman-rte .rte-toolbar {
    position: sticky; top: 0; z-index: 5; border-radius: var(--radius) var(--radius) 0 0;
}
.nman-area.rte-area { min-height: 60vh; max-height: none; overflow: visible; font-size: 1rem; line-height: 1.7; padding: 1.2rem 1.4rem; }
.nman-area.is-arrastando { box-shadow: inset 0 0 0 3px var(--primary); background: var(--primary-soft); }
.nman-area table { min-width: 60%; }
.nman-dica { margin: .5rem 0 0; }
.nman-barra {
    position: sticky; bottom: 0; z-index: 5;
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
    margin-top: 1rem; padding: .75rem .9rem;
    background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .08);
}
.nman-barra-nota { flex: 1 1 280px; min-width: 0; }
.nman-barra-nota input {
    width: 100%; padding: .55rem .75rem; border: 1px solid var(--control-border);
    border-radius: 8px; background: var(--card); color: var(--text); box-sizing: border-box;
}
.nman-barra-botoes { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.nman-lateral { display: grid; gap: 1rem; position: sticky; top: 1rem; }
.nman-lat-bloco {
    background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: .9rem 1rem;
}
.nman-lat-bloco h2 { font-size: .95rem; margin: 0 0 .4rem; }
.nman-lat-bloco .hint { margin: 0 0 .6rem; }
.nman-lat-bloco form { margin: 0 0 .5rem; display: grid; gap: .5rem; justify-items: start; }
.nman-lat-bloco form:last-child { margin-bottom: 0; }
.nman-lat-bloco input[type="file"] { max-width: 100%; font-size: .82rem; }
.nman-lat-perigo { border-color: var(--danger-soft); }
.nman-recuperar { border-left-color: #b7791a; }

@media (max-width: 1100px) {
    .nman-editor-grade { grid-template-columns: minmax(0, 1fr); }
    .nman-lateral { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (max-width: 980px) {
    .nman-ler { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .nman-sumario {
        position: static; max-height: none; overflow: visible; border-right: 0; padding: .6rem .8rem;
        background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius);
    }
    .nman-sumario summary { margin-bottom: 0; }
    .nman-sumario details[open] summary { margin-bottom: .5rem; }
    .nman-sumario summary::after { content: " ▾"; }
    .nman-doc-head h1 { font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) { .nman-ancora { transition: none; } }

@media print {
    .nman-voltar, .nman-sumario, .nman-doc-acoes, .nman-achados, .nman-ancora, .nman-aviso { display: none !important; }
    .nman-ler { display: block; }
    .nman-doc { max-width: none; }
    .nman-doc h2, .nman-doc h3, .nman-doc h4 { break-after: avoid; page-break-after: avoid; }
    .nman-doc tr, .nman-doc img { break-inside: avoid; page-break-inside: avoid; }
    .nman-mark { background: none; color: inherit; box-shadow: none; }
}
.nman-aviso a { color: var(--primary); font-weight: 600; }
/* Link com cara de botão solto no bloco: inline, o padding sobrepunha a linha de cima. */
.nman-lat-bloco > a.btn-ghost { display: inline-block; }

/* ===== Sistema » Usuários — exclusão EM MASSA (só com a chave do .env) =====
   O aviso fica visível enquanto a chave estiver ligada: é uma porta que só
   deve ficar aberta em teste. O texto usa --text: o fundo é translúcido e
   acompanha o tema, então a tinta também precisa acompanhar. */
.usr-massa-aviso {
    margin: 0 0 1rem;
    padding: .7rem .9rem;
    border: 1px solid rgba(192, 54, 47, .35);
    border-left: 4px solid var(--danger);
    border-radius: 10px;
    background: rgba(192, 54, 47, .08);
    color: var(--text);
    font-size: .88rem;
    line-height: 1.45;
}
.usr-massa-aviso code { font-size: .82rem; }
.usr-massa-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin: 0 0 .75rem;
    padding: .55rem .75rem;
    border: 1px solid var(--control-border);
    border-radius: 10px;
    background: var(--surface);
    font-size: .88rem;
    font-weight: 600;
}
.usr-massa-barra[hidden] { display: none; }
.usr-massa-barra > span { margin-right: auto; }
.table th.usr-sel, .table td.usr-sel { width: 2.4rem; text-align: center; }
.usr-sel input[type="checkbox"] { width: 1.05rem; height: 1.05rem; cursor: pointer; }
.usr-massa-lista {
    max-height: 11rem;
    overflow-y: auto;
    margin: .4rem 0 .9rem;
    padding: .5rem .75rem .5rem 1.6rem;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    background: var(--surface);
    font-size: .88rem;
    columns: 2 14rem;
}
.usr-massa-lista .usr-massa-mais { list-style: none; color: var(--muted); font-style: italic; }
.usr-massa-efeitos { margin: 0 0 1rem; padding-left: 1.2rem; font-size: .85rem; color: var(--text); line-height: 1.5; }
.usr-massa-efeitos li + li { margin-top: .25rem; }
.usr-massa-ok { white-space: nowrap; }
.usr-massa-ok:disabled { opacity: .5; cursor: not-allowed; }
/* No celular a tabela vira cartão (rótulo à esquerda, valor à direita): a
   coluna estreita da caixa não pode segurar a caixa colada no rótulo. */
@media (max-width: 640px) {
    .table td.usr-sel { width: auto; text-align: right; }
}

/* ===== Sistema » Aninha » aba Nome (App\Core\Agente) ===== */
.an-nome-rotulo { display: block; font-size: .82rem; font-weight: 600; color: var(--muted); margin-bottom: .45rem; min-height: 1.1rem; }
.an-genero { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; padding-top: .35rem; }
/* ⚠️ A grade de formulário estiliza TODO label e input de dentro do `.ff`
   (`.ff label` vira rótulo cinza em bloco, `.ff input` estica a 100% com
   padding e borda) — os rádios saíam empilhados, cada um no meio da coluna.
   Especificidade (0,3,x) vence as duas sem depender da ordem do arquivo. */
.ff .an-genero .check {
    display: inline-flex; align-items: center; gap: .45rem; margin: 0;
    font-size: .9rem; font-weight: 500; color: var(--text); cursor: pointer;
}
.ff .an-genero .check input {
    width: 18px; height: 18px; flex: 0 0 auto; margin: 0; padding: 0;
    border: 0; background: none; box-shadow: none; accent-color: var(--primary);
}
.an-nome-previa {
    margin: 1.1rem 0 1rem;
    padding: .85rem 1rem;
    border: 1px dashed var(--control-border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    font-size: .9rem;
}
.an-nome-previa p { margin: .35rem 0 0; }
.an-nome-previa-tit { font-size: .75rem; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.an-nome-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .2rem .7rem; border-radius: 999px;
    background: var(--primary); color: #fff; font-weight: 600; font-size: .85rem;
}
body.tema-escuro .an-nome-chip { color: #2a1010; }

/* =========================== Status nas Conversas (a bolinha colorida) ===========================
   `App\Core\Presenca`. Uma cor por status, MEDIDA contra o cartão e a superfície
   nos dois modos (≥ 3:1, o piso de elemento de interface). A cor nunca é o único
   sinal: toda bolinha tem o rótulo ao lado, no `title` ou no `aria-label`, e duas
   têm forma própria — Offline é um anel vazio e Não perturbe leva o traço.
   ⚠️ Status novo em `Presenca::STATUS` precisa da sua regra aqui, senão sai cinza. */
:root {
    --st-disponivel:   #15803d;
    --st-reuniao:      #a87908;
    --st-ligacao:      #2563eb;
    --st-almoco:       #d9620f;
    --st-nao-perturbe: #7c3aed;
    --st-ausente:      #dc2626;
    --st-fora:         #6b7280;
    --st-offline:      #7f848d;
}
body.tema-escuro {
    --st-disponivel:   #34c46a;
    --st-reuniao:      #e5b522;
    --st-ligacao:      #5b8ff5;
    --st-almoco:       #f08a3c;
    --st-nao-perturbe: #a37cf5;
    --st-ausente:      #f0625a;
    --st-fora:         #9aa0aa;
    --st-offline:      #7d838c;
}
.st-dot {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--st-cor, var(--st-offline));
    vertical-align: middle;
}
.st-dot.st-disponivel   { --st-cor: var(--st-disponivel); }
.st-dot.st-reuniao      { --st-cor: var(--st-reuniao); }
.st-dot.st-ligacao      { --st-cor: var(--st-ligacao); }
.st-dot.st-almoco       { --st-cor: var(--st-almoco); }
.st-dot.st-nao_perturbe { --st-cor: var(--st-nao-perturbe); }
.st-dot.st-ausente      { --st-cor: var(--st-ausente); }
.st-dot.st-fora         { --st-cor: var(--st-fora); }
/* Offline: anel vazio — é "não há ninguém", e não mais uma cor. */
.st-dot.st-offline { background: transparent; box-shadow: inset 0 0 0 2px var(--st-offline); }
/* Não perturbe: o traço branco do sinal de proibido. */
.st-dot.st-nao_perturbe::after {
    content: "";
    position: absolute;
    left: 22%; right: 22%; top: 50%;
    height: 2px;
    margin-top: -1px;
    border-radius: 1px;
    background: #fff;
}

/* Na foto da lista de conversas: encostada no canto, com um anel na cor do
   cartão para se descolar da foto. */
.im-av { position: relative; flex: 0 0 auto; display: inline-flex; }
.st-dot.st-dot-av {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 12px;
    height: 12px;
    box-shadow: 0 0 0 2px var(--card);
}
.st-dot.st-dot-av.st-offline { background: var(--card); box-shadow: inset 0 0 0 2px var(--st-offline), 0 0 0 2px var(--card); }

/* Cabeçalho da conversa aberta: "● Em almoço — volto às 14h · até 14:30". */
.im-chat-sub .st-dot { margin-right: .35rem; vertical-align: -1px; }

/* Aviso colado no compositor. ⚠️ `display: flex` venceria o atributo `hidden`
   — daí a regra explícita. */
.im-st-aviso {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 1rem .5rem;
    padding: .45rem .75rem;
    border: 1px solid var(--card-border);
    border-radius: 9px;
    background: var(--surface);
    color: var(--text);
    font-size: .84rem;
    line-height: 1.35;
}
.im-st-aviso[hidden] { display: none; }
.im-st-aviso strong { font-weight: 700; }

/* ---- o seletor do topo ---- */
.st-trigger {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    padding: .34rem .7rem;
    border: 1px solid var(--control-border);
    border-radius: 999px;
    background: var(--card);
    color: var(--text);
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.st-trigger:hover { background: var(--surface); }
.dropdown.st-pick:focus-within .st-trigger { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.st-trigger-rot { max-width: 9.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Em tela estreita o topo não comporta o rótulo: fica a bolinha (o rótulo
   continua no aria-label e no menu). */
@media (max-width: 1100px) {
    .st-trigger-rot { display: none; }
    .st-trigger { padding: .45rem .55rem; }
}

.st-menu { min-width: 250px; }
.st-menu-head { display: grid; gap: .15rem; padding: .4rem .7rem .45rem; }
.st-menu-tit { font-size: .8rem; font-weight: 700; color: var(--text); }
.st-menu-resumo { font-size: .8rem; color: var(--text); overflow-wrap: anywhere; }
.st-form { margin: 0; }
.dropdown-item.st-opcao {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    border: 0;
    background: none;
    font: inherit;
    font-size: .9rem;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}
.dropdown-item.st-opcao:hover { background: var(--surface); }
.st-opcao .st-check { margin-left: auto; visibility: hidden; color: var(--primary); font-weight: 700; }
.st-opcao[aria-checked="true"] { font-weight: 600; }
.st-opcao[aria-checked="true"] .st-check { visibility: visible; }
.dropdown-item.st-abrir {
    width: 100%;
    border: 0;
    background: none;
    font: inherit;
    font-size: .9rem;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}
.dropdown-item.st-abrir:hover { background: var(--surface); }
.dropdown-item.st-abrir[hidden] { display: none; }
/* `--ch-axis` e não `--muted`: em 12px o `--muted` mede 4,47:1 e reprova AA. */
.st-menu-nota { margin: .25rem .7rem .4rem; max-width: 230px; font-size: .75rem; line-height: 1.35; color: var(--ch-axis, var(--muted)); }

/* ---- o modal "Mensagem e duração" ---- */
.st-radios {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem .6rem;
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
}
.st-radios legend { margin-bottom: .45rem; padding: 0; font-size: .82rem; font-weight: 600; color: var(--text); }
.st-radio {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .6rem;
    border: 1px solid var(--control-border);
    border-radius: 9px;
    font-size: .88rem;
    color: var(--text);
    cursor: pointer;
}
.st-radio:hover { background: var(--surface); }
.st-radio:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.st-radio input { margin: 0; accent-color: var(--primary); }
.st-modal-acoes { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-top: 1.1rem; }
.st-modal-direita { display: flex; gap: .5rem; margin-left: auto; }
@media (max-width: 520px) {
    .st-radios { grid-template-columns: 1fr; }
}

/* =========================== Chamados — setores (mig. 148) ===========================
   O setor é a subdivisão do departamento. Na fila ele aparece ABAIXO do
   departamento, na mesma célula: a tabela já tem 9 colunas e estoura em 1100px
   (registrado), e uma décima a empurraria ainda mais. */
.ch-setor-sub {
    display: block;
    margin-top: .1rem;
    font-size: .78rem;
    color: var(--ch-axis, var(--muted));
}
/* O campo Setor do "Novo chamado" ocupa a linha inteira do grid-2 (o texto de
   quem responde é longo) e some quando o departamento não tem setores.
   ⚠️ `hidden` precisa de regra: `.field`/`.ch-field` declaram display. */
.ch-setor-campo { grid-column: 1 / -1; }
.ch-setor-campo[hidden],
.ch-field[hidden] { display: none; }
.ch-setor-quem {
    display: block;
    margin-top: .35rem;
    font-size: .8rem;
    line-height: 1.35;
    color: var(--text);
}

/* Tela de gestão (/chamados/setores) */
.cset-deps { margin-top: 0; }
.cset-regra { margin: 0 0 1rem; max-width: 80ch; }
.cset-desc { display: block; margin-top: .15rem; font-size: .8rem; color: var(--ch-axis, var(--muted)); }
.cset-auto { margin-left: .35rem; font-size: .7rem; }
.cset-grupo { margin: .4rem 0 .4rem; font-size: .8rem; font-weight: 600; color: var(--text); }
.cset-outros { margin-top: .75rem; }
.cset-outros > summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--primary); }
.cset-outros > .member-grid { margin-top: .6rem; }
.cset-resumo { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; }

/* =================== Chamados — fechamento automático (mig. 149) ===================
   A frase sai do servidor (`FechamentoAutomatico::aviso`). Texto em `--text`
   sobre um fundo levemente âmbar: a tinta âmbar fica só no ícone e na borda —
   no texto inteiro ela cansaria e, no escuro, o fundo translúcido muda de tom
   (é a regra dos `.badge-*`: fundo translúcido pede tinta por modo, e o
   `--text` é). ⚠️ `hidden` precisa de regra: o bloco declara display. */
.ch-auto-aviso {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    margin-top: .9rem;
    padding: .6rem .8rem;
    font-size: .86rem;
    line-height: 1.4;
    color: var(--text);
    background: color-mix(in srgb, var(--alert-warn-ink) 9%, var(--card));
    border: 1px solid color-mix(in srgb, var(--alert-warn-ink) 28%, transparent);
    border-left: 3px solid var(--alert-warn-ink);
    border-radius: 8px;
}
.ch-auto-aviso[hidden] { display: none; }
.ch-auto-ico { flex: 0 0 auto; margin-top: .05rem; color: var(--alert-warn-ink); }
/* Configurações → Chamados: o bloco do fechamento automático, abaixo do SLA. */
.cfg-auto { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--card-border); }
.cfg-auto-tit { margin: 0 0 .35rem; font-size: 1.05rem; }
.cfg-auto-regra { margin: 0 0 1rem; max-width: 80ch; }
.cfg-auto-check { margin-bottom: .75rem; }
.cfg-auto-dias { max-width: 320px; }
.cfg-auto-estado { margin: .5rem 0 0; padding-left: 1.1rem; display: grid; gap: .3rem; font-size: .88rem; color: var(--text); max-width: 80ch; }
.cfg-auto-prox { margin-top: .75rem; font-size: .88rem; }
.cfg-auto-prox > summary { cursor: pointer; font-weight: 600; color: var(--primary); }
.cfg-auto-prox ul { margin: .5rem 0 0; padding-left: 1.1rem; display: grid; gap: .25rem; }
@supports not (background: color-mix(in srgb, red 10%, white)) {
    .ch-auto-aviso { background: var(--surface); border-color: var(--card-border); border-left-color: var(--alert-warn-ink); }
}

/* ==========================================================================
   Portal da Operadora → Tutoriais (op/tutoriais.php). Uma aba por módulo do
   portal; o texto é de App\Op\Tutoriais, o mesmo do PDF.
   ⚠️ As abas são LINKS (`?modulo=`), não rádio: `.is-ativa` repete aqui o
   estilo da aba marcada do `.tab-bar` (aquele vive em `#tab-X:checked ~`, que
   um link não aciona).
   ========================================================================== */
.tut-abas .tab { text-decoration: none; }
.tut-abas .tab.is-ativa {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.tut-modulo { padding: 1.6rem 1.75rem 1.9rem; }
.tut-cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
}
.tut-cab-texto { flex: 1 1 32rem; min-width: 0; }
.tut-onde { margin: 0 0 .3rem; font-size: .82rem; font-weight: 600; color: var(--primary); }
.tut-cab h2 { margin: 0 0 .45rem; font-size: 1.45rem; }
.tut-resumo { margin: 0; max-width: 46rem; font-size: 1rem; line-height: 1.6; color: var(--text); }
.tut-acoes { display: flex; gap: .5rem; flex-wrap: wrap; }
.tut-acoes .btn-ghost { text-decoration: none; }

/* O corpo tem a largura de LEITURA (~90 caracteres): em 1700px de tela uma
   linha de 200 caracteres não se lê. Tabela e código usam a mesma coluna, e o
   resumo do topo também — as bordas direitas coincidem. */
.tut-corpo { max-width: 46rem; margin-top: .5rem; }
.tut-corpo p,
.tut-corpo li { line-height: 1.65; }
.tut-corpo code {
    padding: .08rem .38rem;
    font-size: .88em;
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: 5px;
}
.tut-secao { margin-top: 1.9rem; }
.tut-secao-titulo {
    position: relative;
    margin: 0 0 .75rem;
    padding-left: .8rem;
    font-size: 1.08rem;
    line-height: 1.35;
}
/* A barra de destaque do título — a mesma do PDF. */
.tut-secao-titulo::before {
    content: "";
    position: absolute;
    left: 0; top: .12em; bottom: .12em;
    width: 3px;
    border-radius: 2px;
    background: var(--primary);
}

/* Passos: números em círculo — é uma sequência de verdade, a ordem importa. */
.tut-passos { counter-reset: tut-passo; list-style: none; margin: 0 0 .9rem; padding: 0; display: grid; gap: .6rem; }
.tut-passos > li { counter-increment: tut-passo; position: relative; padding-left: 2.35rem; min-height: 1.6rem; }
.tut-passos > li::before {
    content: counter(tut-passo);
    position: absolute;
    left: 0; top: .1rem;
    width: 1.55rem; height: 1.55rem;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700;
    color: #fff;
    background: var(--primary);
    border-radius: 50%;
    font-variant-numeric: tabular-nums;
}
.tut-lista { list-style: none; margin: 0 0 .9rem; padding: 0; display: grid; gap: .35rem; }
.tut-lista > li { position: relative; padding-left: 1.15rem; }
.tut-lista > li::before {
    content: "";
    position: absolute;
    left: .2rem; top: .7em;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--primary);
}

/* Dica e Atenção. ⚠️ A cor do texto é DEFINIDA (não herdada): com o fundo
   tingido, herdar o `--text` do modo escuro daria claro sobre claro. */
.tut-nota {
    margin: .9rem 0 1rem;
    padding: .8rem 1rem .85rem 1.1rem;
    color: var(--text);
    background: color-mix(in srgb, var(--primary) 7%, var(--card));
    border-left: 4px solid var(--primary);
    border-radius: 10px;
}
.tut-nota p { margin: .2rem 0 0; }
.tut-nota-rot { display: block; font-size: .84rem; color: var(--primary); }
.tut-atencao { color: #2b2418; background: #fff6e6; border-left-color: #e08a00; }
.tut-atencao .tut-nota-rot { color: #8a5100; }
@supports not (background: color-mix(in srgb, red 10%, white)) {
    .tut-nota { background: var(--surface); }
    .tut-atencao { background: #fff6e6; }
}
body.tema-escuro .tut-atencao { color: var(--text); background: rgba(224, 138, 0, .13); }
body.tema-escuro .tut-atencao .tut-nota-rot { color: #f0b04a; }

.tut-tabela-wrap { margin: .4rem 0 1rem; border: 1px solid var(--card-border); }
.tut-tabela td { vertical-align: top; line-height: 1.5; }
.tut-tabela td.tut-curta { white-space: nowrap; }
@media (max-width: 640px) {
    /* No cartão, o valor fica à direita do rótulo e alinhado à direita. */
    .tut-tabela tbody td > span { text-align: right; }
}
.tut-tabela thead th { white-space: normal; }

/* Perguntas: `<details>` nativo — abrir e fechar não justifica JavaScript. */
.tut-faq { border-top: 1px solid var(--card-border); }
.tut-faq details { border-bottom: 1px solid var(--card-border); }
.tut-faq summary {
    cursor: pointer;
    padding: .75rem 0;
    font-weight: 600;
    color: var(--text);
}
.tut-faq summary:hover { color: var(--primary); }
.tut-faq details p { margin: 0 0 .9rem; padding-left: 1rem; }

.tut-codigo { position: relative; margin: .5rem 0 1rem; }
.tut-codigo pre {
    margin: 0;
    padding: .95rem 1.1rem;
    overflow-x: auto;
    font-size: .86rem;
    line-height: 1.6;
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: 10px;
}
.tut-codigo pre code { padding: 0; background: none; border: 0; font-size: inherit; }
.tut-codigo .btn-ghost { position: absolute; top: .5rem; right: .5rem; }

/* Os tipos de Envios: pílulas (`.ch-tabs`) e a parte aberta num quadro. */
.tut-partes { margin-top: .4rem; }
.tut-parte {
    margin-top: 1rem;
    padding: 1.2rem 1.35rem 1.4rem;
    border: 1px solid var(--card-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--primary) 3%, var(--card));
}
.tut-parte-titulo { margin: 0 0 .4rem; font-size: 1.2rem; }
.tut-parte .tut-secao { margin-top: 1.5rem; }
@media (max-width: 640px) {
    .tut-modulo { padding: 1.15rem 1.1rem 1.4rem; }
    .tut-cab h2 { font-size: 1.25rem; }
    .tut-parte { padding: 1rem 1rem 1.2rem; }
    .tut-codigo .btn-ghost { position: static; margin-bottom: .4rem; }
}

/* ==========================================================================
   RH → Perfil comportamental (rh/comportamental*.php + rh-comportamental.js)
   ==========================================================================
   Uma cor só para os índices (`.rc-bar-primary` = `var(--primary)`): é
   magnitude, não categoria. Grade, linha do meio e textos do gráfico por
   CLASSE, com tokens — o modo escuro depende disso. */
.rhc-voltar { margin: 0 0 .35rem; font-size: .86rem; }
/* Título de card: o `.rh-sub` traz margem de cima (é subtítulo dentro da ficha);
   aqui ele abre o card, então só a de baixo. */
.rh-sub.rhc-h { margin: 0 0 .5rem; }
/* As abas da lista ficam no TOPO do card: sem o traço e o respiro que o
   `.u-tabs-filtro` usa para separá-las dos campos de filtro. */
.u-tabs-filtro.rhc-abas { margin: 0; padding-top: 0; border-top: 0; }
.rhc-voltar a { color: var(--muted); text-decoration: none; }
.rhc-voltar a:hover { color: var(--primary); text-decoration: underline; }
.rhc-acoes-topo { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.rhc-acoes-linha { display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.rhc-vazio { padding: 1.6rem .5rem .8rem; text-align: center; }
.rhc-vazio p { margin: 0 0 .5rem; }
/* O "+ Novo processo" do estado vazio é um <a class="btn">: inline, o padding
   vertical não empurra a linha de cima e o botão cobria a frase da dica. */
.rhc-vazio .btn { display: inline-block; margin-top: .6rem; }
.rhc-sub { display: block; margin-top: .15rem; color: var(--muted); font-size: .8rem; line-height: 1.35; font-weight: 400; }
.rhc-de { color: var(--muted); }
.rhc-alerta { color: var(--alert-warn-ink); font-weight: 700; }
.rhc-tab-wrap { margin-top: .9rem; }
.rhc-resumo { margin-bottom: 1rem; }
.rhc-tag {
    display: inline-block; margin-right: .35rem; padding: .05rem .45rem; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--card-border);
    color: var(--text); font-size: .72rem; font-weight: 600; vertical-align: .05em;
}
.pill.rhc-pill-aviso { color: var(--alert-warn-ink); background: rgba(217, 119, 6, .14); }
.pill.rhc-pill-neutro { color: var(--text); background: var(--surface); border: 1px solid var(--card-border); }
.rhc-codigo { font-size: 1rem; letter-spacing: .04em; }
.rhc-th-nota { font-weight: 400; color: var(--muted); }
.rhc-nota-tab { margin: .7rem 0 0; }

/* Os quatro índices lado a lado, numa célula: letra · barra · valor. A barra é
   SVG com a largura em ATRIBUTO (vale sem JS e sem InlineCss); o traço do meio
   marca o 50, que é o neutro. */
.rhc-mini {
    display: grid; grid-template-columns: .9rem minmax(4.5rem, 7rem) 1.7rem;
    align-items: center; gap: .12rem .4rem; min-width: 10rem;
}
.rhc-mini-l { font-size: .74rem; font-weight: 800; color: var(--text); }
.rhc-mini-v { font-size: .76rem; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.rhc-mini-b { display: block; width: 100%; height: 8px; overflow: visible; }
.rhc-mini-trilho { fill: var(--card-border); }
.rhc-mini-meio { stroke: var(--text); stroke-opacity: .55; stroke-width: 1.5; vector-effect: non-scaling-stroke; }

.rhc-sobre { margin-bottom: 1rem; }
.rhc-sobre summary, .rhc-detalhes summary { cursor: pointer; font-weight: 600; }
.rhc-sobre h3 { margin: .9rem 0 .3rem; font-size: .85rem; }
.rhc-pre { margin: 0; white-space: pre-line; line-height: 1.55; max-width: 80ch; }
.rhc-detalhes { margin-top: 1rem; }
.rhc-detalhes[open] summary { margin-bottom: .6rem; }

/* Convidar colaboradores */
.rhc-colab-barra { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin: .9rem 0 .2rem; }
.rhc-colab-barra .check { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; }
.rhc-colab-grid {
    max-height: min(46vh, 420px); overflow-y: auto;
    padding: .3rem .7rem; border: 1px solid var(--card-border); border-radius: 10px; background: var(--surface);
}
.field .member-grid .rhc-colab { align-items: flex-start; gap: .5rem; }
.field .member-grid .rhc-colab input { margin-top: .2rem; flex: none; }
.rhc-colab-txt { min-width: 0; }
.rhc-colab-nome { display: block; overflow-wrap: anywhere; }
.field .member-grid .rhc-colab.is-bloq { color: var(--muted); cursor: not-allowed; }
.rhc-linhas { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86rem; }

/* Resultado */
.rhc-res { margin-top: 0; }
.rhc-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1rem; margin: .9rem 0; font-size: .88rem; }
.rhc-dl dt { color: var(--muted); }
.rhc-dl dd { margin: 0; }
.alert.rhc-alerta-leitura, .rhc-alerta-leitura {
    color: var(--alert-warn-ink); background: rgba(217, 119, 6, .1); border: 1px solid rgba(217, 119, 6, .28);
}
.rhc-grafico { max-width: 440px; margin: .8rem auto .4rem; }
.rhc-tab-num { margin-top: .4rem; font-size: .86rem; }
.rhc-perfil-cod { margin: .6rem 0 .1rem; font-size: 3.2rem; line-height: 1; font-weight: 800; letter-spacing: .02em; color: var(--primary); }
.rhc-perfil-nome { margin: 0 0 .8rem; font-size: 1.05rem; font-weight: 700; }
.rhc-texto { margin: 0 0 .8rem; line-height: 1.6; max-width: 78ch; }
.rhc-fator { margin-top: 1rem; }
.rhc-fator .rh-sub .rhc-sub, .rh-sub .rhc-sub { display: inline; margin-left: .4rem; }
.rhc-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .4rem 1.4rem; margin: .4rem 0 .8rem; }
.rhc-colunas h3, .rhc-ia h3 { margin: .3rem 0 .3rem; font-size: .84rem; font-weight: 700; }
.rhc-colunas ul { margin: 0; padding-left: 1.05rem; line-height: 1.5; font-size: .9rem; }
.rhc-colunas li + li { margin-top: .2rem; }
.rhc-ia { margin-top: 1rem; }
.rhc-ia-estado { margin: .2rem 0 .8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.rhc-ia-estado.is-erro { color: var(--alert-error-ink); }
.rhc-aviso {
    margin: 1rem 0 0; padding: .7rem .9rem; border-left: 3px solid var(--primary);
    background: var(--surface); border-radius: 0 8px 8px 0; color: var(--text); font-size: .86rem; line-height: 1.5;
}

/* Gráfico de colunas (Chart::colunas) */
.ch-col { display: block; }
.ch-col-grade { stroke: var(--card-border); stroke-width: 1; }
.ch-col-meio { stroke: var(--ch-axis); stroke-width: 1; stroke-dasharray: 4 4; }
.ch-col-letra { font-size: 13px; font-weight: 800; fill: var(--text); }
.ch-col-valor { font-size: 12px; font-weight: 700; fill: var(--text); font-variant-numeric: tabular-nums; }

/* Ficha do colaborador — aba "Perfil comportamental" */
.rhc-ficha-lista { display: grid; gap: .6rem; margin-top: .6rem; }
.rhc-ficha-item {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem 1rem; align-items: center;
    padding: .7rem .85rem; border: 1px solid var(--card-border); border-radius: 10px;
}

/* Impressão */
.rhc-print-empresa { margin: 0; font-weight: 700; color: var(--primary); text-align: right; }
.rhc-print-topo { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.rhc-print-alerta { padding: .5rem .7rem; border-radius: 8px; font-size: .84rem; }
.rhc-print .rhc-texto { font-size: .88rem; }

@media (max-width: 760px) {
    .rhc-print-topo { grid-template-columns: 1fr; }
    .rhc-mini { min-width: 9rem; }
}
@media print {
    .rhc-print .rhc-colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rhc-aviso { background: none; }
}

/* ==============================================================
   Canal de denúncia (.den-*) — formulário, recibo e acompanhamento
   do denunciante, a caixa do Jurídico e a tela do administrador.
   ⚠️ Só tokens do tema (claro e escuro de graça). Os selos de situação
   usam a tinta POR MODO (`--alert-*-ink`): fundo translúcido com hex fixo
   reprova num dos dois modos — regra já registrada nos `.badge-*`.
   ============================================================== */
.den-wrap { max-width: 1180px; margin: 0 auto; padding-block: .25rem 1.5rem; }
.den-wrap-estreito { max-width: 820px; }
.den-topo + .den-wrap { width: 100%; padding-top: 0; }
/* A página pública começa no topo (o <body> do layouts/app centraliza na vertical). */
body:has(> .den-topo) { justify-content: flex-start; }
.den-head { margin-bottom: 1.25rem; }

/* Cabeçalho da página PÚBLICA (layouts/app não tem menu). */
/* ⚠️ O <body> do layouts/app é flex em coluna CENTRALIZADO: sem a largura
   explícita, cabeçalho e página encolheriam até o conteúdo. */
.den-topo {
    width: 100%; max-width: 1180px; box-sizing: border-box;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    padding: .7rem 1rem; border-radius: 14px;
    background: var(--card); border: 1px solid var(--card-border);
}
.den-topo-marca { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--text); }
.den-topo-logo { height: 34px; width: auto; max-width: 160px; }
.den-topo-nome { font-weight: 700; }
.den-topo-selo {
    font-size: .78rem; font-weight: 700; color: var(--primary);
    background: var(--primary-soft); padding: .25rem .6rem; border-radius: 999px;
}
.den-topo-nav { display: flex; gap: 1rem; flex-wrap: wrap; }
.den-topo-nav a { color: var(--text); font-size: .9rem; font-weight: 600; text-decoration: none; }
.den-topo-nav a:hover { color: var(--primary); text-decoration: underline; }

.den-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.25rem; align-items: start; }
.den-grid > * { min-width: 0; }
@media (max-width: 980px) { .den-grid { grid-template-columns: minmax(0, 1fr); } }
.den-lado { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 1rem; }
@media (max-width: 980px) { .den-lado { position: static; } }

.den-sec { margin-bottom: 1rem; }
.den-sec-tit { margin: 0 0 .75rem; font-size: 1.02rem; font-weight: 700; color: var(--text); }
.den-sec-sub { display: block; font-size: .82rem; font-weight: 600; color: var(--muted); margin-bottom: .4rem; }
.den-sec-txt { margin: 0 0 .75rem; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.den-opc { font-weight: 400; color: var(--muted); }
.den-erro-campo { margin: .35rem 0 0; font-size: .82rem; font-weight: 600; color: var(--alert-error-ink); }

/* Textareas: `.field textarea` não existe no projeto (só input e select). */
.den-sec .field textarea, .den-sec textarea.den-termo-area, .den-anexar textarea {
    width: 100%; padding: .75rem .85rem; font: inherit; font-size: .95rem; line-height: 1.5;
    color: var(--text); background: var(--surface); border: 1px solid var(--control-border);
    border-radius: 11px; resize: vertical;
}
.den-sec .field textarea:focus, .den-sec textarea.den-termo-area:focus, .den-anexar textarea:focus {
    outline: none; border-color: var(--primary); background: var(--card); box-shadow: 0 0 0 4px var(--ring);
}
.den-termo-area { font-family: inherit; min-height: 22rem; }

/* As duas formas de envio, como cartões de escolha. */
.den-modos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (max-width: 640px) { .den-modos { grid-template-columns: minmax(0, 1fr); } }
.den-modo {
    display: flex; gap: .7rem; align-items: flex-start; cursor: pointer;
    padding: .95rem 1rem; border: 1.5px solid var(--card-border); border-radius: 12px;
    background: var(--card); transition: border-color .15s, background .15s;
}
.den-modo:hover { border-color: var(--primary); }
.den-modo:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.den-modo input { margin-top: .2rem; accent-color: var(--primary); flex: none; }
.den-modo-corpo { display: flex; flex-direction: column; gap: .3rem; }
.den-modo-tit { font-weight: 700; color: var(--text); }
.den-modo-txt { font-size: .85rem; line-height: 1.45; color: var(--muted); }

.den-dica {
    margin-top: .9rem; padding: .8rem 1rem; font-size: .87rem; line-height: 1.5;
    border-left: 4px solid var(--alert-info-ink); border-radius: 0 10px 10px 0;
    background: rgba(29, 78, 216, .07); color: var(--text);
}
.den-dica ul { margin: .35rem 0 0; padding-left: 1.1rem; }
.den-ident { margin-top: 1rem; }
.den-ident .form-grid + .form-grid { margin-top: .8rem; }
.den-ident-nota { margin-bottom: .6rem; }
.den-conta { margin: 0 0 .8rem; align-items: flex-start; }

.den-recorrente { border: 0; padding: 0; margin: 1rem 0 0; }
.den-recorrente legend { font-size: .82rem; font-weight: 600; color: var(--muted); margin-bottom: .35rem; padding: 0; }
.den-recorrente .check { display: inline-flex; margin: 0 1.2rem .3rem 0; }
.den-anexo-nota { margin: .9rem 0 0; }
.den-contador { margin: .3rem 0 0; text-align: right; }

/* Quem lê, com a marcação de "está envolvida". */
.den-leitores { list-style: none; margin: 0; padding: 0; border: 1px solid var(--card-border); border-radius: 10px; }
.den-leitor {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap;
    padding: .55rem .85rem; border-top: 1px solid var(--card-border);
}
.den-leitor:first-child { border-top: 0; }
.den-leitor-nome { font-weight: 600; color: var(--text); }
.den-leitor-ex { margin: 0; font-size: .85rem; color: var(--muted); }

/* Aviso legal: o que a pessoa precisa ler antes de enviar. */
.den-termo { border-left: 4px solid var(--alert-warn-ink); }
/* Inteiro, sem caixa de rolagem: é o texto que a pessoa declara ter lido. */
.den-termo-texto { font-size: .9rem; line-height: 1.6; color: var(--text); }
.den-termo-texto p { margin: 0 0 .7rem; }
.den-termo-texto ul { margin: 0 0 .7rem; padding-left: 1.2rem; }
.den-termo-texto li { margin-bottom: .3rem; }
.den-termo-mini { max-height: 18rem; overflow-y: auto; padding-right: .3rem; font-size: .84rem; }
.den-ciente { margin: 1rem 0 0; align-items: flex-start; padding: .75rem .85rem; border-radius: 10px; background: var(--surface); }

.den-acoes { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-top: .25rem; }
.den-acoes .hint { margin: 0; }
.den-enviar { width: auto; padding-inline: 1.6rem; }
.den-acoes-fim { margin-top: 1.25rem; }

/* Campo-isca: fora da tela, fora do teclado, fora do leitor de tela. */
.den-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.den-como .den-passos { margin: 0; }
.den-passos dt { font-weight: 700; font-size: .88rem; color: var(--text); margin-top: .75rem; }
.den-passos dt:first-child { margin-top: 0; }
.den-passos dd { margin: .2rem 0 0; font-size: .86rem; line-height: 1.5; color: var(--muted); }
.den-acomp-link { display: flex; flex-direction: column; gap: .2rem; text-decoration: none; }
.den-acomp-link:hover { border-color: var(--primary); }
.den-acomp-link .den-sec-tit { margin: 0; }
.den-acomp-link .hint { margin: 0; }

/* Recibo: protocolo + chave são o centro da tela. */
.den-ok { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: 1rem; }
.den-ok-ico {
    flex: none; width: 44px; height: 44px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--alert-success-ink); background: rgba(8, 116, 67, .12);
}
.den-ok-tit { margin: 0 0 .25rem; font-size: 1.5rem; letter-spacing: -.02em; }
.den-ok-txt { margin: 0; color: var(--muted); }
.den-cred {
    margin: 0 0 1.25rem; padding: 1.1rem 1.2rem; border-radius: 14px;
    border: 2px dashed var(--primary); background: var(--surface);
}
.den-cred-item { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .45rem 0; }
.den-cred-rot { width: 6.5rem; font-size: .82rem; font-weight: 700; color: var(--muted); }
.den-cred-val {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.3rem; font-weight: 700; letter-spacing: .06em; color: var(--text);
    background: var(--card); border: 1px solid var(--card-border); border-radius: 8px; padding: .3rem .6rem;
    overflow-wrap: anywhere;
}
.den-cred-pe { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; margin-top: .6rem; padding-top: .8rem; border-top: 1px solid var(--card-border); }
.den-cred-aviso { margin: 0; flex: 1 1 18rem; font-size: .87rem; line-height: 1.5; color: var(--text); }
@media (max-width: 560px) { .den-cred-val { font-size: 1.05rem; } .den-cred-rot { width: 100%; } }

.den-arq { margin: .75rem 0 .9rem; }
.den-arq-rot { display: block; font-size: .82rem; font-weight: 600; color: var(--muted); margin-bottom: .35rem; }
.den-arq input[type="file"] { max-width: 100%; font-size: .88rem; color: var(--text); }
.den-arq .hint { margin: .35rem 0 0; }

/* Situação (denunciante e Jurídico). */
.den-st { display: inline-block; padding: .25rem .65rem; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.den-st-recebida  { color: var(--alert-info-ink);  background: rgba(29, 78, 216, .10); }
.den-st-analise   { color: var(--alert-warn-ink);  background: rgba(217, 119, 6, .13); }
.den-st-aguardando { color: var(--primary); background: var(--primary-soft); }
.den-st-encerrada { color: var(--pill-muted-ink); background: var(--pill-muted-bg); }

.den-msgs { max-height: none; margin-bottom: .9rem; }
/* ⚠️ Sem `white-space: pre-wrap`: o texto já vem com `nl2br`, e os dois
   juntos dobrariam cada quebra de linha. */
.den-texto { overflow-wrap: anywhere; }
.den-ilegivel { color: var(--alert-error-ink); font-style: italic; }
.den-pendente .cht-card { border-style: dashed; opacity: .85; }
.den-responder { border-top: 1px solid var(--card-border); padding-top: .9rem; }
.den-anexo-form { display: inline; }
.den-anexo-btn {
    display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .65rem; cursor: pointer;
    font: inherit; font-size: .82rem; font-weight: 600; color: var(--primary); text-decoration: none;
    background: var(--card); border: 1px solid var(--control-border); border-radius: 999px;
}
.den-anexo-btn:hover { border-color: var(--primary); }
.den-relato summary { cursor: pointer; margin: 0; }
.den-relato[open] summary { margin-bottom: .75rem; }
.den-kv { margin: .5rem 0 0; font-size: .9rem; color: var(--text); }
.den-quem { margin: 0 0 .5rem; padding-left: 1.1rem; color: var(--text); font-size: .9rem; }
.den-quem li { margin-bottom: .2rem; }
.den-sair { align-self: flex-start; }

/* Jurídico. */
.den-head-acoes { display: flex; gap: .5rem; flex-wrap: wrap; }
.den-filtro-acoes { display: flex; gap: .5rem; align-items: flex-end; align-self: end; }
.den-prot { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .03em; }
.den-novo {
    display: inline-block; margin-left: .4rem; padding: .08rem .45rem; border-radius: 999px;
    font-size: .7rem; font-weight: 800; color: var(--primary); background: var(--primary-soft);
}
.table tr.den-linha-nova > td:first-child { box-shadow: inset 4px 0 0 var(--primary); }
.den-dias { display: block; margin: .1rem 0 0; }
.den-relato-txt { font-size: .95rem; line-height: 1.6; color: var(--text); margin-bottom: .9rem; }
.den-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .45rem 1rem; margin: 0 0 .75rem; font-size: .9rem; }
.den-dl dt { font-weight: 700; color: var(--muted); }
.den-dl dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
@media (max-width: 560px) { .den-dl { grid-template-columns: minmax(0, 1fr); } .den-dl dd { margin-bottom: .4rem; } }
.den-composer .cht-textarea { width: 100%; }
.den-situacao .field { margin-bottom: .75rem; }
.den-situacao .hint { margin: .6rem 0 0; }
.den-trilha { list-style: none; margin: 0; padding: 0; max-height: 24rem; overflow-y: auto; }
.den-trilha li { display: flex; flex-direction: column; gap: .1rem; padding: .45rem 0; border-top: 1px solid var(--card-border); font-size: .86rem; }
.den-trilha li:first-child { border-top: 0; }
.den-trilha-o { color: var(--text); overflow-wrap: anywhere; }
.den-lado-jur > .den-sec { margin-bottom: 1rem; }
.den-incluir { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--card-border); }
.den-designar { padding: .6rem 0; border-top: 1px solid var(--card-border); }
.den-designar p { margin: 0 0 .4rem; font-size: .9rem; }
.den-designar-linha { display: flex; gap: .5rem; }
.den-designar-linha select { flex: 1 1 auto; min-width: 0; padding: .45rem .6rem; border: 1px solid var(--control-border); border-radius: 9px; background: var(--surface); color: var(--text); font: inherit; font-size: .88rem; }

/* Link no rodapé dos portais. */
.app-footer-den { display: inline-flex; align-items: center; gap: .35rem; color: inherit; font-weight: 600; text-decoration: none; }
.app-footer-den span { text-decoration: underline; text-underline-offset: 2px; }
.app-footer-den:hover { color: var(--primary); }
/* O escudo em vermelho, como no topo (acima de 4:1 sobre o fundo nos dois modos). */
.app-footer-den-ic { flex: 0 0 auto; color: var(--danger); }

/* Versão para impressão. */
.den-print { max-width: 820px; margin: 0 auto; padding: 1.5rem 1rem; color: var(--text); }
.den-print h1 { font-size: 1.5rem; margin: .4rem 0 .3rem; }
.den-print h2 { font-size: 1.05rem; margin: 1.4rem 0 .5rem; border-bottom: 1px solid var(--card-border); padding-bottom: .25rem; }
.den-print-conf { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .04em; color: var(--alert-error-ink); }
.den-print-msg { padding: .5rem 0; border-top: 1px dashed var(--card-border); }
.den-print-msg-top { margin: 0 0 .25rem; font-size: .86rem; color: var(--muted); }
.den-print-pe { margin-top: 2rem; font-size: .8rem; color: var(--muted); }
@media print { .den-print .den-trilha { max-height: none; overflow: visible; } }

/* ==========================================================================
   ADM » Comunicado (mig. 156) — o pop-up e as telas de administração
   ========================================================================== */

/* O pop-up fica ACIMA dos outros (MKT 300, aniversário 1000, data de
   nascimento 1200) e abaixo do overlay de envio (1300): um comunicado da
   empresa é lido antes de qualquer outro aviso da página. */
.modal.com-modal { z-index: 1250; }
.com-modal .modal-backdrop { background: rgba(16, 24, 40, .58); }
.com-modal-box.modal-box {
    max-width: 760px;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* A faixa de cima é o degradê da barra do menu, com a ponta verde FECHADA
   (a do `.bv-data`): o texto branco de 13px sobre o #00af52 da barra mede
   menos de 3:1. */
.com-modal-topo {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .8rem 1.25rem;
    color: #fff;
    background-color: #1552d0;
    background-image: linear-gradient(120deg, #1552d0, #0b7a44);
}
.com-modal-ico { flex: 0 0 auto; transform-origin: 30% 50%; }
.com-modal.is-open .com-modal-ico { animation: com-megafone .9s ease-in-out .15s 1; }
@keyframes com-megafone {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-14deg); }
    40% { transform: rotate(11deg); }
    60% { transform: rotate(-7deg); }
    80% { transform: rotate(4deg); }
}
.com-modal-rotulo { font-weight: 700; font-size: .92rem; letter-spacing: .01em; }
.com-modal-fila,
.com-modal-previa {
    margin-left: auto;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: rgba(255, 255, 255, .2);
}
.com-modal-fila + .com-modal-previa { margin-left: .35rem; }
.com-modal-corpo {
    padding: 1.35rem 1.5rem .4rem;
    overflow-y: auto;
    max-height: 58vh;
}
.com-modal-tit {
    margin: 0 0 .75rem;
    font-size: 1.32rem;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--text);
    overflow-wrap: anywhere;
}
.com-modal-msg {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text);
    overflow-wrap: anywhere;
}
.com-modal-msg a { color: var(--primary); font-weight: 600; text-decoration: underline; }
.com-modal-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.5rem 1.25rem;
    margin-top: .9rem;
    border-top: 1px solid var(--card-border);
}
.com-modal-de { font-size: .85rem; color: var(--muted); min-width: 0; }
.com-modal-rodape .btn { margin-left: auto; min-width: 9rem; }
body.tema-escuro .com-modal-topo { background-image: none; background-color: #323232; }
/* Branco sobre o --primary clareado do escuro mede 3,53:1 (defeito conhecido
   do `.btn`); a tinta escura mede 5,03:1. */
body.tema-escuro .com-modal .btn { color: #2a1010; }
@media (prefers-reduced-motion: reduce) {
    .com-modal.is-open .com-modal-ico { animation: none; }
}
@media (max-width: 560px) {
    .com-modal-corpo { padding: 1.1rem 1.1rem .3rem; }
    .com-modal-rodape { padding: .9rem 1.1rem 1.1rem; }
    .com-modal-rodape .btn { width: 100%; }
}

/* --- Lista --- */
.com-vazio { text-align: left; }
.com-vazio h2 { margin: 0 0 .4rem; font-size: 1.1rem; }
.com-vazio .hint { max-width: 62ch; margin-bottom: 1rem; }
.com-td-titulo { display: flex; flex-direction: column; gap: .15rem; min-width: 12rem; }
/* Ações em FLEX que quebra, nunca `nowrap`: o agendado tem quatro botões, e em
   uma linha só a coluna estourava a tabela e cortava o "Excluir". */
.com-td-acoes { width: 1%; }
.com-acoes-linha { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; min-width: 11rem; }
.com-acoes-linha form { display: inline; }
.com-td-titulo .hint { margin: 0; }
.com-trecho { font-size: .85rem; color: var(--muted); }
.com-pct { margin-left: .35rem; font-size: .78rem; color: var(--muted); }
.com-st {
    display: inline-block;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--pill-muted-ink);
    background: var(--pill-muted-bg);
}
/* Fundo translúcido exige tinta POR MODO — por isso os tokens `--alert-*-ink`. */
.com-st-agendado { color: var(--alert-info-ink); background: color-mix(in srgb, var(--alert-info-ink) 12%, transparent); }
.com-st-no_ar    { color: var(--alert-success-ink); background: color-mix(in srgb, var(--alert-success-ink) 12%, transparent); }
.com-leituras {
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
    max-height: 52vh;
    overflow-y: auto;
    border-top: 1px solid var(--card-border);
}
.com-leituras li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .55rem .1rem;
    border-bottom: 1px solid var(--card-border);
    font-size: .92rem;
}
.com-visto { font-size: .82rem; color: var(--alert-success-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.com-nao-visto { font-size: .82rem; font-weight: 600; color: var(--alert-warn-ink); white-space: nowrap; }

/* --- Formulário --- */
.com-form { max-width: 920px; }
.com-textarea {
    width: 100%;
    padding: .8rem .9rem;
    font: inherit;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: 11px;
    resize: vertical;
    min-height: 9rem;
}
.com-textarea:focus { outline: none; border-color: var(--primary); background: var(--card); box-shadow: 0 0 0 4px var(--ring); }
.com-bloco {
    margin: 0 0 1.1rem;
    padding: .9rem 1.1rem 1.1rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    min-width: 0;
}
.com-bloco legend { padding: 0 .35rem; font-weight: 700; font-size: .95rem; color: var(--text); }
.com-opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .7rem; }
.com-opcao {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .75rem .9rem;
    border: 1px solid var(--control-border);
    border-radius: 11px;
    cursor: pointer;
    color: var(--text);
}
.com-opcao input { margin-top: .2rem; width: 18px; height: 18px; accent-color: var(--primary); flex: 0 0 auto; }
.com-opcao > span { display: flex; flex-direction: column; gap: .15rem; }
.com-opcao .hint { margin: 0; }
.com-opcao:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.com-opcao:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--ring); }
.com-pessoas { margin-top: .9rem; }
.com-pessoas-barra { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-bottom: .6rem; }
.com-busca,
.com-grupo {
    padding: .6rem .8rem;
    font: inherit;
    font-size: .92rem;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: 10px;
}
.com-busca { flex: 1 1 260px; min-width: 0; }
.com-grupo { flex: 0 1 220px; }
.com-busca:focus,
.com-grupo:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.com-marcados { margin-left: auto; font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.field.com-grade-wrap { margin-bottom: 0; }
.com-grade.member-grid {
    max-height: 320px;
    overflow-y: auto;
    margin: 0;
    padding: .35rem .75rem;
    border: 1px solid var(--card-border);
    border-radius: 11px;
}
.field .member-grid .check.com-pessoa { align-items: flex-start; gap: .5rem; }
.com-pessoa input { margin-top: .15rem; flex: 0 0 auto; }
.com-pessoa > span { display: flex; flex-direction: column; min-width: 0; }
.com-pessoa small { font-size: .76rem; color: var(--muted); }
.com-sem-resultado { margin: .5rem 0 0; }
.com-datas { margin-top: .9rem; }
.com-acoes { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }

/* ------------------------------------------------------------------
   Portal da Operadora » Carga — progresso do envio em partes
   (carga-envio.js). A largura da barra é aplicada por CSSOM (a CSP só barra
   o atributo `style`).
------------------------------------------------------------------ */
.cg-progresso { margin-top: 1.1rem; padding: .95rem 1.05rem; border: 1px solid var(--card-border);
    border-radius: 12px; background: var(--surface); }
.cg-prog-topo { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.cg-prog-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cg-prog-pct { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.cg-barra { height: 10px; margin: .55rem 0 .45rem; border-radius: 999px; background: var(--card-border); overflow: hidden; }
.cg-barra > span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--primary);
    transition: width .3s ease; }
.cg-prog-info { margin: 0; color: var(--text); font-size: .85rem; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.cg-prog-status { margin: .4rem 0 0; color: var(--muted); font-size: .85rem; line-height: 1.45; }
.cg-prog-acoes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
@media (prefers-reduced-motion: reduce) { .cg-barra > span { transition: none; } }

/* ------------------------------------------------------------------
   FACILITIES (mig. 157) — manutenção corretiva e preventiva.
   ⚠️ Os selos (.fac-st-*, .fac-pr-*) definem a PRÓPRIA cor de texto: são
   chips claros autocontidos, legíveis nos dois modos. Cor nunca carrega o
   dado sozinha — todo selo tem a palavra.
------------------------------------------------------------------ */
.fac-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.fac-head-acoes { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.fac-st { display: inline-block; padding: .18rem .6rem; border-radius: 999px; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.fac-st-novo      { background: #e7f0ff; color: #1a4fb0; }
.fac-st-espera    { background: #fdf0d8; color: #8a4b05; }
.fac-st-andamento { background: #ece8fb; color: #4b34a8; }
.fac-st-ok        { background: #e3f5e9; color: #146c38; }
.fac-st-fim       { background: #eceef1; color: #4a5361; }
.fac-st-prev      { background: transparent; color: var(--muted); border: 1px dashed var(--control-border, var(--card-border)); }
.fac-pr { display: inline-block; padding: .14rem .5rem; border-radius: 6px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.fac-pr-baixa       { background: #eceef1; color: #4a5361; }
.fac-pr-media       { background: #e7f0ff; color: #1a4fb0; }
.fac-pr-alta        { background: #fdf0d8; color: #8a4b05; }
.fac-pr-urgente     { background: #fde4e2; color: #a3221b; }
.fac-pr-emergencial { background: #b3261e; color: #fff; }
.fac-atraso { color: var(--danger); font-weight: 700; }
.fac-prazo { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; white-space: nowrap; }
.fac-num { font-weight: 700; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; white-space: nowrap; }
.fac-cor { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .35rem; vertical-align: middle; background: var(--fac-cor, #7a8291); }
.fac-cor-0 { --fac-cor: #2f6fd0; } .fac-cor-1 { --fac-cor: #0e8f8a; } .fac-cor-2 { --fac-cor: #6a52c9; } .fac-cor-3 { --fac-cor: #b7791f; }
.fac-cor-4 { --fac-cor: #9a6a45; } .fac-cor-5 { --fac-cor: #2e9b57; } .fac-cor-6 { --fac-cor: #d1453b; } .fac-cor-7 { --fac-cor: #7a8291; }
.fac-aviso { border-left: 4px solid #c97612; background: var(--surface); padding: .75rem 1rem; border-radius: 10px; margin-bottom: 1rem; color: var(--text); }
.fac-aviso strong { color: var(--text); }

/* KPI: os quatro quadros do topo do dashboard são links para a fila filtrada. */
.fac-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0; }
@media (max-width: 980px) { .fac-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fac-kpis .stat .value { font-variant-numeric: normal; font-feature-settings: normal; font-size: 2rem; }
.fac-kpis .rp-sub { margin-top: .2rem; }

/* Dashboard */
.fac-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.fac-grid > * { min-width: 0; }
.fac-g-8 { grid-column: span 8; } .fac-g-4 { grid-column: span 4; } .fac-g-6 { grid-column: span 6; } .fac-g-12 { grid-column: span 12; }
@media (max-width: 1100px) { .fac-g-8, .fac-g-4 { grid-column: span 12; } }
@media (max-width: 860px) { .fac-g-6 { grid-column: span 12; } }
.fac-card-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin: 0 0 .8rem; }
.fac-card-titulo h2 { margin: 0; font-size: 1.02rem; font-weight: 700; }
.fac-card-titulo a { font-size: .82rem; }
.fac-sla-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.fac-sla-num { padding: .7rem .8rem; border: 1px solid var(--card-border); border-radius: 12px; background: var(--surface); }
.fac-sla-num .v { display: block; font-size: 1.45rem; font-weight: 800; color: var(--text); }
.fac-sla-num .l { display: block; font-size: .78rem; color: var(--muted); }
.fac-cron { list-style: none; margin: 0; padding: 0; }
.fac-cron li { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) auto; gap: .7rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--card-border); }
.fac-cron li:last-child { border-bottom: 0; }
.fac-cron .d { font-weight: 800; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; color: var(--text); }
.fac-cron .d small { display: block; font-weight: 600; color: var(--muted); font-size: .72rem; }
.fac-cron .t { min-width: 0; }
.fac-cron .t a, .fac-cron .t span.n { display: block; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fac-cron .t a { text-decoration: none; }
.fac-cron .t a:hover, .fac-cron .t a:focus-visible { text-decoration: underline; color: var(--primary); }
.fac-cron .t small { display: block; color: var(--muted); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Ficha da OS */
.fac-os-topo { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.fac-os-topo h1 { margin: .15rem 0 .35rem; font-size: 1.45rem; }
.fac-os-meta { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; color: var(--muted); font-size: .86rem; }
.fac-etapas { display: flex; gap: 0; margin: 1rem 0 0; padding: 0; list-style: none; overflow-x: auto; }
.fac-etapas li { flex: 1 1 0; min-width: 6.5rem; position: relative; padding-top: 1.15rem; font-size: .78rem; color: var(--muted); }
.fac-etapas li::before { content: ""; position: absolute; top: .3rem; left: 0; right: 0; height: 3px; background: var(--card-border); }
.fac-etapas li::after { content: ""; position: absolute; top: 0; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--card); border: 2px solid var(--card-border); }
.fac-etapas li.feito::before, .fac-etapas li.feito::after { background: var(--primary); border-color: var(--primary); }
.fac-etapas li.atual::after { background: var(--card); border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.fac-etapas li strong { display: block; color: var(--text); font-size: .82rem; }
.fac-etapas li.feito strong, .fac-etapas li.atual strong { color: var(--text); }
.fac-acoes { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; }
.fac-acoes form { margin: 0; }
.fac-acao { position: relative; }
.fac-acao > summary { list-style: none; cursor: pointer; }
.fac-acao > summary::-webkit-details-marker { display: none; }
.fac-acao[open] > summary { box-shadow: 0 0 0 3px var(--ring); }
.fac-acao-painel { position: absolute; z-index: 20; top: calc(100% + .4rem); left: 0; width: min(420px, 86vw); padding: 1rem;
    background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; box-shadow: var(--shadow); }
.fac-acao-painel .field { margin-bottom: .7rem; }
.fac-acao-painel textarea { min-height: 5.5rem; }
/* ⚠️ `.field textarea` NÃO existe no projeto (só `.field input, .field select`):
   sem esta classe os campos de texto da OS saíam com a cara crua do navegador. */
.fac-area { width: 100%; min-height: 4.5rem; resize: vertical; padding: .7rem .8rem; font: inherit; font-size: .95rem;
    color: var(--text); background: var(--surface); border: 1px solid var(--card-border); border-radius: 11px; outline: none; }
.fac-area:focus { border-color: var(--primary); background: var(--card); box-shadow: 0 0 0 4px var(--ring); }
/* Caixa de seleção dentro do `.ff`: `.ff label` (display: block) venceria o
   `.check` e a caixa sairia em cima do texto. */
.ff label.fac-check { display: flex; align-items: center; gap: .55rem; min-height: 2.45rem; margin: 0; color: var(--text); font-size: .88rem; font-weight: 500; }
/* Ocupa a altura do rótulo dos campos vizinhos, para a caixa ficar na linha deles. */
.fac-check-vao { display: block; height: 1.1rem; margin-bottom: .35rem; }
.ff label.fac-check input { width: auto; flex: 0 0 auto; }
@media (max-width: 640px) { .fac-acao-painel { position: static; width: auto; margin-top: .5rem; } }
.fac-kv { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .45rem .9rem; margin: 0; font-size: .9rem; }
.fac-kv dt { color: var(--muted); }
.fac-kv dd { margin: 0; min-width: 0; overflow-wrap: break-word; color: var(--text); }
@media (max-width: 560px) { .fac-kv { grid-template-columns: 1fr; gap: .1rem; } .fac-kv dd { margin-bottom: .45rem; } }
.fac-desc { white-space: pre-wrap; overflow-wrap: break-word; margin: 0; color: var(--text); }
.fac-hist { list-style: none; margin: 0; padding: 0; }
.fac-hist li { position: relative; padding: 0 0 1rem 1.3rem; border-left: 2px solid var(--card-border); margin-left: .4rem; }
.fac-hist li:last-child { border-left-color: transparent; padding-bottom: 0; }
.fac-hist li::before { content: ""; position: absolute; left: -6px; top: .2rem; width: 10px; height: 10px; border-radius: 50%; background: var(--card); border: 2px solid var(--primary); }
.fac-hist li.interno::before { border-color: #c97612; }
.fac-hist .q { font-size: .78rem; color: var(--muted); }
.fac-hist .x { margin: .15rem 0 0; white-space: pre-wrap; overflow-wrap: break-word; color: var(--text); }
.fac-tag-interno { display: inline-block; font-size: .68rem; font-weight: 700; padding: .05rem .4rem; border-radius: 5px; background: #fdf0d8; color: #8a4b05; margin-left: .3rem; }
.fac-anexos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .6rem; }
.fac-anexo { display: block; border: 1px solid var(--card-border); border-radius: 10px; overflow: hidden; background: var(--surface); text-decoration: none; color: var(--text); font-size: .74rem; }
.fac-anexo img { display: block; width: 100%; height: 86px; object-fit: cover; background: var(--card-border); }
.fac-anexo span { display: block; padding: .3rem .45rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fac-anexo .ext { display: flex; align-items: center; justify-content: center; height: 86px; font-weight: 800; color: var(--muted); font-size: .9rem; }
.fac-ck { list-style: none; margin: 0; padding: 0; }
.fac-ck > li { padding: .75rem 0; border-bottom: 1px solid var(--card-border); }
.fac-ck > li:last-child { border-bottom: 0; }
.fac-ck-q { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; }
.fac-ck-q strong { font-weight: 600; color: var(--text); }
.fac-ck-op { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.fac-ck-op label { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border: 1px solid var(--control-border, var(--card-border)); border-radius: 999px; font-size: .85rem; cursor: pointer; background: var(--card); color: var(--text); }
.fac-ck-op input { accent-color: var(--primary); }
/* Dentro do `.ff` (formulário do plano) o `.ff input { width: 100% }` esticava
   o rádio e empurrava o texto da pílula para três linhas. */
.fac-ck-op input[type="radio"], .fac-ck-op input[type="checkbox"] { width: auto; flex: 0 0 auto; margin: 0; padding: 0; }
.fac-ck-op input[type="text"], .fac-ck-op input[type="number"] { border: 1px solid var(--control-border, var(--card-border)); border-radius: 8px; padding: .4rem .55rem; width: 9rem; background: var(--card); color: var(--text); }
.fac-ck-obs { margin-top: .45rem; }
.fac-ck-obs input { width: 100%; }
.fac-nc { color: var(--danger); font-weight: 700; font-size: .78rem; }
.fac-ok { color: #146c38; font-weight: 700; font-size: .78rem; }
body.tema-escuro .fac-ok { color: #6fd29a; }
.fac-proc { border: 1px solid var(--card-border); border-radius: 12px; padding: .9rem 1rem; background: var(--surface); }

/* Formulário do pedido (celular primeiro) */
.fac-urg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
@media (min-width: 761px) { .fac-urg { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fac-urg label { display: flex; gap: .5rem; align-items: center; padding: .55rem .7rem; border: 1px solid var(--control-border, var(--card-border));
    border-radius: 10px; cursor: pointer; font-size: .86rem; color: var(--text); background: var(--card); }
.fac-urg input { accent-color: var(--primary); }
.field .fac-urg label { margin: 0; font-weight: 500; color: var(--text); font-size: .86rem; }
.field .fac-emerg.check { display: flex; align-items: flex-start; gap: .55rem; margin: .2rem 0 0; font-weight: 600; color: var(--text); font-size: .9rem; }
/* ⚠️ `.field input` (width: 100%, padding) alcança rádio e caixa: sem isto o
   rádio esticava e empurrava o texto da opção para três linhas. */
.field .fac-urg input, .field .fac-emerg input { width: auto; flex: 0 0 auto; margin: .15rem 0 0; padding: 0; }
.field .fac-urg input { margin: 0; }
/* `.field-note` solto num `.field` sai do tamanho do texto: aqui é dica. */
[data-fac-pedido] .field > .field-note { display: block; margin-top: .35rem; font-size: .78rem; line-height: 1.4; color: var(--muted); opacity: 1; }

/* Plano: linhas do checklist */
.fac-ck-linhas { display: flex; flex-direction: column; gap: .6rem; }
.fac-ck-linha { display: grid; grid-template-columns: minmax(0, 1fr) 9.5rem 5.5rem 5.5rem 4.5rem auto; gap: .5rem; align-items: end;
    padding: .65rem; border: 1px solid var(--card-border); border-radius: 10px; background: var(--surface); }
.fac-ck-linha > div > label { display: block; font-size: .74rem; color: var(--muted); font-weight: 600; margin-bottom: .2rem; }
/* Campos do checklist do plano com a mesma cara do `.ff` (não estão dentro de um). */
.fac-ck-linha input, .fac-ck-linha select { width: 100%; padding: .45rem .6rem; font: inherit; font-size: .9rem;
    color: var(--text); background: var(--card); border: 1px solid var(--card-border); border-radius: 9px; outline: none; }
.fac-ck-linha input:focus, .fac-ck-linha select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.fac-ck-linha .fac-ck-flags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 1rem; }
.fac-ck-linha .fac-ck-flags label.check { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: .82rem; font-weight: 500; color: var(--text); }
.fac-ck-linha .fac-ck-flags input { width: auto; flex: 0 0 auto; }
@media (max-width: 860px) { .fac-ck-linha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .fac-ck-linha > div:first-child { grid-column: 1 / -1; } }

/* Árvore de locais */
.fac-arvore { list-style: none; margin: 0; padding: 0; }
.fac-arvore li { display: flex; justify-content: space-between; gap: .75rem; align-items: center; padding: .5rem .25rem; border-bottom: 1px solid var(--card-border); }
.fac-arvore li.n1 { padding-left: .25rem; } .fac-arvore li.n2 { padding-left: 1.6rem; } .fac-arvore li.n3 { padding-left: 3.2rem; } .fac-arvore li.n4 { padding-left: 4.8rem; } .fac-arvore li.n5 { padding-left: 6.4rem; }
.fac-arvore li.inativo { opacity: .6; }
.fac-arvore .nome { min-width: 0; color: var(--text); }
.fac-arvore .nome small { color: var(--muted); margin-left: .35rem; }
.fac-arvore .acoes { display: flex; gap: .35rem; flex: 0 0 auto; }
.fac-uni-tabs { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: 1rem; }
.fac-linha-acoes { display: inline-flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.fac-linha-acoes form { margin: 0; }

/* ===== Calendário PREVENTIVO (`facilities/calendario`) =====
   Cores MEDIDAS (branco sobre a cor), TODAS ≥ 4,5 nas duas pontas — o rótulo
   cai para 16px no celular, e ali texto "grande" (3:1) não vale: vermelho
   #d32f2f→#b71c1c (4,98–6,57), laranja #cc4a00→#b33f00 (4,62–5,79), azul
   #1976d2→#1565c0 (4,60–5,75), verde #2e7d32→#1f6b25 (5,13–6,59). Os tons
   claros (#e65100 = 3,79; #388e3c = 4,12) reprovavam no texto menor. Texto COLORIDO sobre o
   cartão (data, ponto, legenda) usa a tinta `--sit-*`, que muda no escuro:
   o vermelho escuro some sobre o fundo escuro.
   ⚠️ Os cartões (`.kpi-cores` / `.kpi-cor is-red|orange|blue|green`) são
   COMPARTILHADOS: Calendário preventivo e a ficha da operadora. Quem precisar
   das tintas `--sit-*` acrescenta o seu escopo nas duas regras abaixo. */
.fac-pv, .opd-ficha {
    --sit-red: #c62828; --sit-orange: #c2410c; --sit-blue: #1565c0; --sit-green: #2e7d32;
}
body.tema-escuro .fac-pv, body.tema-escuro .opd-ficha {
    --sit-red: #ff8a80; --sit-orange: #fdba74; --sit-blue: #90caf9; --sit-green: #81c784;
}
.kpi-cor.is-red, .fac-tipo.is-red       { --c1: #d32f2f; --c2: #b71c1c; }
.kpi-cor.is-orange, .fac-tipo.is-orange { --c1: #cc4a00; --c2: #b33f00; }
.kpi-cor.is-blue, .fac-tipo.is-blue     { --c1: #1976d2; --c2: #1565c0; }
.kpi-cor.is-green, .fac-tipo.is-green   { --c1: #2e7d32; --c2: #1f6b25; }

/* Barra de filtros em "pílulas" + a troca Lista | Calendário à direita. */
.fac-pv-barra { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 1rem; }
.fac-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .35rem .2rem .8rem; background: var(--card);
    border: 1px solid var(--control-border); border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.05); font-size: .9rem; min-width: 0; }
.fac-pill > span { color: var(--text); font-weight: 600; white-space: nowrap; }
.fac-pill select { border: 0; background: transparent; color: var(--text); font: inherit; font-weight: 700; padding: .4rem .2rem; max-width: 15rem; min-width: 0; cursor: pointer; outline: none; }
.fac-pill:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.fac-seg { margin-left: auto; display: inline-flex; border: 1px solid var(--control-border); border-radius: 10px; overflow: hidden; background: var(--card); }
.fac-seg a { padding: .5rem 1.3rem; font-weight: 700; color: var(--text); text-decoration: none; }
.fac-seg a + a { border-left: 1px solid var(--control-border); }
.fac-seg a:hover { background: var(--surface); }
.fac-seg a.is-on { background: #1565c0; color: #fff; }
.fac-seg a:focus-visible { outline: 3px solid var(--ring); outline-offset: -3px; }
@media (max-width: 640px) { .fac-seg { margin-left: 0; } .fac-pill { flex: 1 1 100%; } .fac-pill select { flex: 1 1 auto; max-width: none; } }

/* Os quatro cartões de cor (componente compartilhado — ver o comentário das tintas acima). */
.kpi-cores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; margin-bottom: 1rem; }
@media (max-width: 900px) { .kpi-cores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi-cor { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between;
    gap: .8rem; min-height: 88px; padding: 1rem 1.2rem; border-radius: 12px; color: #fff; text-decoration: none;
    background: linear-gradient(120deg, var(--c1), var(--c2)); box-shadow: 0 8px 18px -10px rgba(0,0,0,.45); transition: transform .15s ease, box-shadow .15s ease; }
.kpi-cor::after { content: ""; position: absolute; left: 35%; right: -20%; bottom: -60%; height: 95%; background: rgba(255,255,255,.09);
    transform: skewY(-9deg); pointer-events: none; }
a.kpi-cor:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -12px rgba(0,0,0,.5); color: #fff; }
.kpi-cor:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
/* O rótulo quebra DENTRO do espaço dele e o número fica sempre ao lado: com flex-wrap, "Próximos 7 dias" empurrava
   o número para a linha de baixo e só aquele cartão ficava desalinhado dos outros três. */
.kpi-cor-rot { position: relative; flex: 1 1 0; min-width: 0; font-size: 1.15rem; font-weight: 800; line-height: 1.2; text-shadow: 0 1px 1px rgba(0,0,0,.2); }
.kpi-cor-num { position: relative; flex: none; font-size: 2.7rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; text-shadow: 0 1px 2px rgba(0,0,0,.2); }
@media (prefers-reduced-motion: reduce) { .kpi-cor, .kpi-cor:hover { transition: none; transform: none; } }
/* Em tela estreita (dois cartões por linha, ~170px cada) rótulo e número não cabem
   lado a lado: "Aguardando processamento" passava por baixo do número. O número
   desce para baixo do rótulo, à direita, dentro do mesmo cartão. */
@media (max-width: 560px) {
    .kpi-cor { flex-direction: column; align-items: stretch; gap: .3rem; min-height: 0; padding: .85rem 1rem; }
    .kpi-cor-rot { flex: none; font-size: 1rem; }
    .kpi-cor-num { align-self: flex-end; font-size: 2.2rem; }
}

/* Cartões de seção: a cabeça tem a linha embaixo e o corpo o próprio respiro. */
.card.fac-pv-sec { padding: 0; margin-bottom: 1rem; overflow: hidden; }
.fac-pv-sec-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .3rem 1rem;
    padding: 1rem 1.2rem .85rem; border-bottom: 1px solid var(--card-border); }
.fac-pv-sec-head h2 { margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--text); }
.fac-pv-sec-corpo { padding: 1rem 1.2rem 1.1rem; }
.fac-pv-cal-corpo { padding: .8rem 1rem 1rem; }

/* Cronograma (tabela). */
.fac-pv-tab thead th { background: var(--surface); }
.fac-pv-tab td { vertical-align: middle; padding-top: .8rem; padding-bottom: .8rem; }
.fac-pv-tarefa { display: flex; align-items: flex-start; gap: .65rem; min-width: 0; }
.fac-pv-tarefa > span { min-width: 0; }
.table .fac-pv-tarefa a { color: var(--text); font-weight: 700; }
.table .fac-pv-tarefa a:hover { color: var(--primary); }
.fac-pv-tarefa small { display: block; font-size: .74rem; margin-top: .1rem; }
.fac-pv-sq { flex: 0 0 auto; width: 14px; height: 14px; margin-top: .2rem; border-radius: 3px; background: var(--fac-pt, #888); }
.fac-pv-data { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.fac-pv-data.is-red { color: var(--sit-red); }
.fac-pv-data.is-orange { color: var(--sit-orange); }
.fac-pv-freq { font-weight: 700; }
.fac-pv-pill { display: inline-block; min-width: 8rem; padding: .32rem .7rem; border-radius: 6px; text-align: center; white-space: nowrap;
    font-size: .8rem; font-weight: 800; color: #fff; box-shadow: inset 0 -2px 0 rgba(0,0,0,.14); }
.fac-pv-pill.is-atrasada  { background: #c62828; }
.fac-pv-pill.is-breve     { background: #c2410c; }
.fac-pv-pill.is-andamento { background: #2e7d32; }
.fac-pv-pill.is-agendada  { background: #1565c0; }
.fac-pv-pill.is-concluida { background: #1b5e20; }
.fac-pv-pill.is-prevista  { background: transparent; color: var(--sit-blue); box-shadow: inset 0 0 0 1.5px var(--sit-blue); }

/* Pontos (mini calendário, próximas, legenda, tipos) e o quadrado da tarefa. */
.fac-pt { display: inline-block; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--fac-pt, #888); }
.fac-pt.is-red, .fac-pv-sq.is-red       { --fac-pt: var(--sit-red); }
.fac-pt.is-orange, .fac-pv-sq.is-orange { --fac-pt: var(--sit-orange); }
.fac-pt.is-blue, .fac-pv-sq.is-blue     { --fac-pt: var(--sit-blue); }
.fac-pt.is-green, .fac-pv-sq.is-green   { --fac-pt: var(--sit-green); }
.fac-pt.is-vazado { background: transparent; box-shadow: inset 0 0 0 2px var(--fac-pt); }

/* Coluna lateral: mini calendário + próximas + legenda. */
.card.fac-pv-lado { height: calc(100% - 1rem); margin-bottom: 1rem; }
.fac-pv-lado h2 { margin: 0 0 .8rem; font-size: 1.1rem; font-weight: 800; }
.fac-mini { border: 1px solid var(--card-border); border-radius: 10px; padding: .55rem .55rem .45rem; background: var(--card); }
.fac-mini-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: .35rem; }
.fac-mini-nav strong { font-size: .95rem; }
.fac-mini-nav a { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; color: var(--text); text-decoration: none; font-size: 1.25rem; font-weight: 700; }
.fac-mini-nav a:hover { background: var(--surface); }
.fac-mini-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.fac-mini-dow { padding: .2rem 0; font-size: .72rem; font-weight: 700; color: var(--text); opacity: .75; }
.fac-mini-dia { display: flex; flex-direction: column; align-items: center; height: 34px; padding-top: 5px; border-radius: 6px;
    font-size: .85rem; font-weight: 600; color: var(--text); text-decoration: none; font-variant-numeric: tabular-nums; }
a.fac-mini-dia { font-weight: 800; }
a.fac-mini-dia:hover { background: var(--surface); }
.fac-mini-dia .fac-pt { width: 6px; height: 6px; margin-top: 3px; }
.fac-mini-dia.is-hoje { box-shadow: inset 0 0 0 2px var(--primary); }
.fac-pv-prox { list-style: none; margin: 1rem 0 0; padding: 0; }
.fac-pv-prox li { display: flex; align-items: center; gap: .5rem; min-width: 0; padding: .5rem 0; border-bottom: 1px solid var(--card-border); font-size: .88rem; }
.fac-pv-prox li:last-child { border-bottom: 0; }
.fac-pv-prox strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.fac-pv-prox span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fac-pv-prox span::before { content: "· "; }
.fac-pv-prox a { color: var(--text); text-decoration: none; }
.fac-pv-prox a:hover { color: var(--primary); text-decoration: underline; }
.fac-pv-leg { list-style: none; display: grid; gap: .3rem; margin: .9rem 0 0; padding: .8rem 0 0; border-top: 1px solid var(--card-border); font-size: .8rem; color: var(--text); }
.fac-pv-leg li { display: flex; align-items: center; gap: .45rem; }

/* Tipos de plano. */
.fac-tipos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
@media (max-width: 640px) { .fac-tipos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fac-tipo { overflow: hidden; border: 1px solid var(--card-border); border-radius: 10px; background: var(--card); text-align: center; box-shadow: 0 3px 8px -5px rgba(0,0,0,.25); }
.fac-tipo-cab { padding: .5rem .4rem; font-size: .9rem; font-weight: 800; color: #fff; background: linear-gradient(120deg, var(--c1), var(--c2)); }
.fac-tipo-num { margin: 0 .8rem; padding: .7rem 0 .3rem; border-bottom: 1px solid var(--card-border); font-size: 2.4rem; font-weight: 800; line-height: 1.1;
    color: var(--text); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.fac-tipo-pts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem .7rem; min-height: 2.4rem; padding: .45rem .4rem .6rem;
    font-size: .85rem; font-weight: 700; color: var(--text); }
.fac-tipo-pt { display: inline-flex; align-items: center; gap: .3rem; }

/* Tendência de cumprimento (`Chart::percentual`). */
.ch-pct { display: block; }
.ch-pct-grade { stroke: var(--card-border); stroke-width: 1; stroke-dasharray: 4 4; }
.ch-pct-area { fill: var(--primary); fill-opacity: .12; }
.ch-pct-linha { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ch-pct-ponto { fill: var(--card); stroke: var(--primary); stroke-width: 2.5; }
.ch-pct-rotulo { font-size: 14px; font-weight: 800; fill: var(--text); }
.ch-pct-sem { fill: var(--ch-axis); }
.fac-tendencia .ch-pct-area { fill: var(--sit-green); }
.fac-tendencia .ch-pct-linha, .fac-tendencia .ch-pct-ponto { stroke: var(--sit-green); }
.fac-tendencia .ch-pct-rotulo:not(.ch-pct-sem) { fill: var(--sit-green); }

/* Calendário grande (reusa .rh-cal). Seletor DOBRADO: a base `.rh-cal-ev`
   declara a borda esquerda e vem antes; dobrar garante a cor qualquer que
   seja a ordem. Os nomes são os de `PainelPreventivo::SITUACOES`. */
.rh-cal-ev.fac-ev-atrasada  { border-left-color: var(--sit-red); }
.rh-cal-ev.fac-ev-breve     { border-left-color: var(--sit-orange); }
.rh-cal-ev.fac-ev-andamento { border-left-color: var(--sit-green); }
.rh-cal-ev.fac-ev-concluida { border-left-color: var(--sit-green); }
.rh-cal-ev.fac-ev-agendada  { border-left-color: var(--sit-blue); }
.rh-cal-ev.fac-ev-prevista  { border-left-style: dashed; border-left-color: var(--sit-blue); background: transparent; }
.rh-cal-dia:target { box-shadow: inset 0 0 0 2px var(--primary); }
.fac-cal-nav { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.fac-cal-nav h2 { margin: 0 .5rem; font-size: 1.15rem; min-width: 10rem; text-align: center; }
/* O item do calendário é link: sem isto o nome sai na cor padrão de link do navegador. */
.fac-cal .rh-cal-ev-p { color: var(--text); }

/* Configuração: grade do expediente */
.fac-exp { width: 100%; border-collapse: collapse; }
.fac-exp th, .fac-exp td { padding: .45rem .5rem; border-bottom: 1px solid var(--card-border); text-align: left; font-size: .88rem; }
.fac-exp input[type="time"] { width: 7.2rem; }
.fac-exp .check { margin: 0; }

/* ===== Ficha da OPERADORA (`operadoras/ver`): números, documentos e gráficos =====
   Os quatro cartões são o componente compartilhado `.kpi-cores` (ver o
   Calendário preventivo); as tintas `--sit-*` valem aqui pelo escopo `.opd-ficha`. */
.opd-head-acoes { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.opd-docs-head, .opd-graf-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .8rem; margin-bottom: .8rem; }
.opd-docs-n { display: inline-block; min-width: 1.6rem; margin-left: .3rem; padding: .05rem .5rem; border-radius: 999px; background: var(--surface);
    color: var(--muted); font-size: .8rem; font-weight: 700; text-align: center; vertical-align: middle; font-variant-numeric: tabular-nums; }
.opd-abas { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; }
.opd-abas a { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem; border: 1px solid var(--control-border); border-radius: 999px;
    background: var(--card); color: var(--text); font-size: .85rem; font-weight: 600; text-decoration: none; }
.opd-abas a span { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.opd-abas a:hover { background: var(--surface); }
.opd-abas a.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }
.opd-abas a.is-on span { color: inherit; opacity: .85; }
.opd-abas a.is-vazia:not(.is-on) { color: var(--muted); }
/* No escuro a cor principal é clareada e o branco sobre ela mede 3,53:1 (já
   registrado no `.btn`); a aba marcada usa tinta escura, como os filtros. */
body.tema-escuro .opd-abas a.is-on { color: #2a1010; }
.opd-lista { list-style: none; margin: 0; padding: 0; }
/* As ações ficam ABAIXO do texto, em uma linha: à direita, com quatro botões, a
   coluna espremia o título a duas ou três palavras por linha. */
.opd-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem .8rem; align-items: start; padding: .85rem 0; border-top: 1px solid var(--card-border); }
.opd-item:first-child { border-top: 0; padding-top: .3rem; }
.opd-ico { color: #d32f2f; margin-top: .1rem; }
.opd-item-tit { color: var(--text); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.opd-item-tit:hover, .opd-item-tit:focus-visible { color: var(--primary); text-decoration: underline; }
.opd-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .65rem; margin-top: .3rem; color: var(--muted); font-size: .82rem; }
/* Selos de tipo em cor SÓLIDA com texto branco (≥ 5:1 nos dois modos). */
.opd-tipo { display: inline-block; padding: .08rem .5rem; border-radius: 6px; color: #fff; font-size: .74rem; font-weight: 700; }
.opd-tipo-contrato { background: #1565c0; }
.opd-tipo-aditivo  { background: #6a1b9a; }
.opd-tipo-regras   { background: #2e7d32; }
.opd-tipo-outro    { background: #546e7a; }
.opd-vig.is-vence   { color: var(--sit-orange); font-weight: 700; }
.opd-vig.is-vencido { color: var(--sit-red); font-weight: 700; }
.opd-item-desc { margin: .4rem 0 0; color: var(--text); font-size: .86rem; overflow-wrap: anywhere; }
.opd-item-quem { margin: .3rem 0 0; color: var(--muted); font-size: .78rem; }
.opd-item-acoes { grid-column: 2; display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .25rem; }
/* O único formulário da linha é o Excluir (só administrador): vai para a outra
   ponta, longe do Visualizar — clicar nele por engano custa o documento. */
.opd-item-acoes form { margin: 0 0 0 auto; }
.opd-vazio { margin: 0; padding: 1.1rem; border-radius: 10px; background: var(--surface); color: var(--muted); text-align: center; }
.opd-vazio p + p { margin-top: .35rem; }
.opd-nota { margin: .8rem 0 0; }
.opd-erro { margin: .4rem 0 0; color: var(--danger); font-size: .85rem; font-weight: 600; }
.opd-graf-svg svg { display: block; width: 100%; height: auto; }
.opd-sub { margin: 1rem 0 .6rem; font-size: .9rem; font-weight: 700; }
.opd-cart-tot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.opd-cart-tot > div { padding: .6rem .8rem; border-radius: 10px; background: var(--surface); min-width: 0; }
.opd-cart-tot span { display: block; color: var(--muted); font-size: .78rem; font-weight: 600; }
.opd-cart-tot strong { display: block; font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.opd-ink-red { color: var(--sit-red); }
.opd-faixas { margin-bottom: .7rem; }
.opd-faixas .rp-bar-val small { margin-left: .25rem; color: var(--muted); font-weight: 600; }
.rp-bar-fill.opd-faixa.is-green  { background: var(--sit-green); }
.rp-bar-fill.opd-faixa.is-orange { background: var(--sit-orange); }
.rp-bar-fill.opd-faixa.is-red    { background: var(--sit-red); }
.rp-bar-fill.opd-faixa.is-muted  { background: var(--muted); }
@media (max-width: 560px) { .opd-cart-tot { grid-template-columns: 1fr; } }

/* ===== Almoxarifado (Facilities, mig. 161) =====
   Tinta de situação própria (`--alm-*`): falta/abaixo do mínimo em vermelho,
   entrada em verde. Medidas sobre o `--card`: claro #c62828 = 5,62:1 e
   #2e7d32 = 5,13:1; escuro #ff8a80 e #81c784 (as mesmas do Calendário). */
:root { --alm-red: #c62828; --alm-green: #2e7d32; }
body.tema-escuro { --alm-red: #ff8a80; --alm-green: #81c784; }

.alm-titulo { margin: .15rem 0 .35rem; font-size: 1.35rem; overflow-wrap: anywhere; }
/* Célula com duas linhas (nome + código): UM bloco só. No celular a tabela vira
   cartão e a célula vira flex — sem o bloco, nome, <br> e código virariam três
   colunas espremidas. */
.alm-cel { min-width: 0; overflow-wrap: anywhere; }
.alm-card-pad { padding: 1rem 1rem 0; }
.table td.alm-num-cel { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.table td.alm-data-cel { white-space: nowrap; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.alm-mov-in { color: var(--alm-green); font-weight: 600; }
.alm-mov-out { color: var(--alm-red); font-weight: 600; }
.alm-falta, .alm-baixo { color: var(--alm-red); font-weight: 700; }
.fac-cron .d.alm-falta, .fac-cron .d.alm-baixo { color: var(--alm-red); }

/* Números da ficha do item. */
.alm-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; margin-bottom: 1rem; }
.alm-num-card { min-width: 0; padding: .75rem .9rem; border: 1px solid var(--card-border); border-radius: 12px; background: var(--card); }
.alm-num-card .l { display: block; color: var(--muted); font-size: .78rem; font-weight: 600; }
.alm-num-card .v { display: block; margin-top: .15rem; font-size: 1.2rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; color: var(--text); }
.alm-num-card.is-baixo { border-left: 4px solid var(--alm-red); }
.alm-num-card.is-baixo .v { color: var(--alm-red); }

/* Ajuste do estoque: os rádios ficam dentro de um `.field`, e `.field label`
   (0,1,1) / `.field input` transformariam cada opção num rótulo cinza com um
   rádio de 100% de largura — o seletor dobrado devolve a cara de opção. */
.field.alm-modo { display: flex; flex-wrap: wrap; gap: .25rem 1.2rem; }
.field.alm-modo label.check { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .9rem; font-weight: 500; color: var(--text); }
.field.alm-modo input { width: 18px; height: 18px; padding: 0; }

/* Editor de linhas (item + quantidade [+ valor]). */
.alm-linha { display: grid; grid-template-columns: minmax(0, 1fr) 11rem auto; gap: .7rem; align-items: start; padding: .6rem 0; border-bottom: 1px dashed var(--card-border); }
.alm-linha.com-valor { grid-template-columns: minmax(0, 1fr) 10rem 10rem auto; }
.alm-linha label, .alm-etapa-linha > label { display: block; margin-bottom: .3rem; font-size: .78rem; font-weight: 600; color: var(--muted); }
.alm-linha input, .alm-linha select, .alm-etapa-linha input[type="text"] {
    width: 100%; padding: .55rem .7rem; border: 1px solid var(--card-border); border-radius: 9px;
    background: var(--surface); color: var(--text); font: inherit; outline: none;
}
.alm-linha input:focus, .alm-linha select:focus, .alm-etapa-linha input[type="text"]:focus { border-color: var(--primary); background: var(--card); box-shadow: 0 0 0 3px var(--ring); }
.alm-linha select { margin-top: .4rem; }
.alm-disp { display: block; min-height: 1.1em; margin-top: .25rem; color: var(--muted); font-size: .78rem; }
.alm-qtd { display: flex; align-items: center; gap: .4rem; }
.alm-qtd input { min-width: 0; text-align: right; font-variant-numeric: tabular-nums; }
.alm-un { flex: 0 0 auto; min-width: 1.6rem; color: var(--muted); font-size: .82rem; font-weight: 600; }
.alm-l-valor input { text-align: right; font-variant-numeric: tabular-nums; }
/* O "Tirar" alinha com os campos, não com os rótulos. */
.alm-remover { margin-top: 1.55rem; }
.alm-linhas [data-alm-add] { margin-top: .7rem; }
.alm-dica { margin: .5rem 0 0; }

/* Quantidades de uma etapa (aprovar / separar / entregar / receber / devolver). */
.alm-etapa-linhas { display: grid; gap: .1rem; margin: .4rem 0 1rem; }
.alm-etapa-linha { display: grid; grid-template-columns: minmax(0, 1fr) 13rem; gap: .8rem; align-items: center; padding: .45rem 0; border-bottom: 1px dashed var(--card-border); }
.alm-etapa-linha > label { margin: 0; font-size: .92rem; color: var(--text); font-weight: 600; }
.alm-etapa-linha > label .hint { font-weight: 400; }

.alm-os-fixa { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; justify-content: space-between; padding: .6rem .8rem; border-radius: 10px; background: var(--surface); }
.alm-form-acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: 1.2rem; }
.alm-compra { overflow-wrap: anywhere; }

/* Bloco da dashboard do Facilities. */
.alm-bloco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1.2rem; }
.alm-bloco-fila { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.alm-bloco-fila a { display: flex; flex-direction: column; gap: .2rem; padding: .7rem .8rem; border-radius: 10px; background: var(--surface); color: var(--text); text-decoration: none; }
.alm-bloco-fila a:hover, .alm-bloco-fila a:focus-visible { box-shadow: inset 0 0 0 1.5px var(--primary); }
.alm-bloco-fila span { color: var(--muted); font-size: .8rem; font-weight: 600; }
.alm-bloco-fila strong { font-size: 1.4rem; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.alm-bloco-sub { margin: 0 0 .5rem; font-size: .9rem; }

@media (max-width: 760px) {
    .alm-linha, .alm-linha.com-valor { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .alm-linha .alm-l-item { grid-column: 1 / -1; }
    .alm-remover { margin-top: 0; grid-column: 1 / -1; justify-self: start; }
    .alm-etapa-linha { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
    .alm-bloco { grid-template-columns: minmax(0, 1fr); }
}

/* ==============================================================
   RH → Triagem de currículos (`.rcv-*`)
   A barra de pontuação é SVG com a largura em ATRIBUTO (`<rect width="62">`
   num viewBox de 0 a 100): vale sem JavaScript e sem `style=""` (CSP). Uma
   cor só (`.rc-bar-primary`): pontuação é magnitude, não categoria.
   ============================================================== */
.rcv-cel { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; min-width: 0; }
.u-tabs-filtro.rcv-abas { margin: 0; padding-top: 0; border-top: 0; }
.table th.rcv-num, .table td.rcv-num { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.rcv-num .rcv-cel { align-items: flex-end; }
.rcv-topo-acoes { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.rcv-link { color: var(--primary); font-weight: 600; text-decoration: none; }
.rcv-link:hover, .rcv-link:focus-visible { text-decoration: underline; }
.rcv-aviso-acao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; }

/* Formulário do perfil */
.rcv-sensivel p { margin: 0 0 .5rem; }
.rcv-sensivel .check { margin: 0; color: inherit; font-weight: 600; }
.rcv-gerar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: .9rem 0 1.1rem; }
.rcv-gerar .btn-ghost { display: inline-flex; align-items: center; gap: .45rem; }
.rcv-gerar .btn-ghost[disabled] { opacity: .55; cursor: not-allowed; }
.rcv-gerar-msg { font-size: .85rem; color: var(--muted); flex: 1 1 18rem; min-width: 0; }
.rcv-gerar-msg.rcv-gerar-erro { color: var(--alert-error-ink); font-weight: 600; }
.rcv-crit-ajuda { margin: 0 0 .9rem; font-size: .84rem; line-height: 1.5; }
.rcv-crits { display: grid; gap: .6rem; margin-bottom: .8rem; }
.rcv-crit {
    display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, .9fr) minmax(0, 2.6fr) 2.2rem;
    gap: .6rem; align-items: end; padding: .7rem .8rem; border: 1px solid var(--card-border); border-radius: 10px; background: var(--surface);
}
.rcv-crit .ff { min-width: 0; }
.rcv-crit .ff input, .rcv-crit .ff select { background: var(--card); }
.rcv-crit-x {
    width: 2.2rem; height: 2.4rem; border: 1px solid var(--control-border); border-radius: 9px; background: var(--card);
    color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.rcv-crit-x:hover, .rcv-crit-x:focus-visible { color: var(--alert-error-ink); border-color: var(--alert-error-ink); }
.rcv-regras { margin: 1rem 0 .4rem; padding-left: 1.1rem; font-size: .86rem; line-height: 1.55; }
.rcv-acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; margin: 1.1rem 0 .5rem; }
.rcv-excluir { display: flex; justify-content: flex-end; margin: 1.5rem 0 0; }

/* Ranking */
.rcv-crit-resumo { margin-top: 0; }
.rcv-crit-resumo > summary { cursor: pointer; list-style: revert; }
.rcv-crit-lista { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .55rem; }
.rcv-tipo {
    display: inline-block; margin-right: .35rem; padding: .05rem .45rem; border-radius: 999px; font-size: .72rem; font-weight: 700;
    color: var(--muted); background: var(--surface); border: 1px solid var(--card-border);
}
.rcv-tipo-obrigatorio { color: var(--alert-error-ink); border-color: color-mix(in srgb, var(--alert-error-ink) 35%, transparent); }
.rcv-tipo-desejavel { color: var(--alert-info-ink); border-color: color-mix(in srgb, var(--alert-info-ink) 35%, transparent); }
.rcv-lista-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin: 1rem 0 .4rem; }
.rcv-busca { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.rcv-busca input[type="search"] {
    min-width: 0; width: 16rem; max-width: 100%; padding: .45rem .7rem; border: 1px solid var(--control-border); border-radius: 9px;
    background: var(--surface); color: var(--text); font: inherit;
}
.rcv-busca input[type="search"]:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.rcv-ranking td { vertical-align: middle; }
.rcv-pos { width: 2.6rem; color: var(--muted); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.rcv-linha-pend td { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.rcv-pont { display: flex; align-items: center; gap: .55rem; min-width: 8.5rem; }
.rcv-pont strong { min-width: 1.8rem; text-align: right; font-size: 1.05rem; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.rcv-barra { display: block; width: 6.5rem; height: 8px; flex: none; }
.rcv-barra-fundo { fill: var(--card-border); }
.rcv-ok { color: var(--alert-success-ink); font-weight: 600; }
.rcv-andando::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .2rem; border-radius: 50%; background: currentColor; animation: rcv-pulso 1.2s ease-in-out infinite; }
@keyframes rcv-pulso { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .rcv-andando::before { animation: none; } }
.rcv-aviso-apoio { margin: 1rem 0 .2rem; font-size: .82rem; }
.rcv-rodape-acoes { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; margin-top: .6rem; }
.rcv-lgpd { margin: .8rem 0 0; font-size: .8rem; }

/* Ficha da análise */
.rcv-aguarde { display: flex; flex-direction: column; gap: .2rem; }
.rcv-placar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
.rcv-placar-num { display: flex; align-items: baseline; gap: .35rem; }
.rcv-placar-valor { font-size: 3.2rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.rcv-placar-de { color: var(--muted); font-weight: 600; }
.rcv-placar-info { flex: 1 1 18rem; min-width: 0; display: grid; gap: .5rem; justify-items: start; }
.rcv-placar-rec { font-size: .9rem; padding: .35rem .8rem; }
.rcv-barra-grande { width: 100%; max-width: 28rem; height: 10px; }
.rcv-texto { margin: 0; line-height: 1.55; overflow-wrap: anywhere; }
.rcv-criterios td { vertical-align: top; }
.rcv-criterios .badge, .rcv-ranking .badge { white-space: nowrap; }
.rcv-evidencia { display: block; padding-left: .6rem; border-left: 3px solid var(--card-border); color: var(--text); font-size: .88rem; line-height: 1.45; quotes: "“" "”"; }
.rcv-listas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.rcv-listas > .card { margin: 0; }
.rcv-listas > .rcv-perguntas { grid-column: 1 / -1; }
.rcv-itens { margin: 0; padding-left: 1.1rem; display: grid; gap: .4rem; line-height: 1.45; }
.rcv-decisao-atual { display: grid; gap: .2rem; margin: 0 0 .8rem; }
.rcv-opcoes { border: 0; margin: 0; padding: 0; }
.rcv-opcoes .check { margin: .2rem 0; }
.rcv-mais-acoes form { margin: 0 0 .5rem; }
.rcv-historico > summary { cursor: pointer; list-style: revert; }
.rcv-eventos { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .55rem; font-size: .86rem; }

@media (max-width: 900px) {
    .rcv-crit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 2.2rem; }
    .rcv-crit .rcv-c-nome, .rcv-crit .rcv-c-desc { grid-column: 1 / 3; }
    .rcv-crit .rcv-c-nome { grid-row: 1; }
    .rcv-crit .rcv-crit-x { grid-column: 3; grid-row: 1; }
}
@media (max-width: 760px) {
    .rcv-listas { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .rcv-busca input[type="search"] { width: 100%; flex: 1 1 100%; }
    .table td.rcv-num, .table td.rcv-pos { justify-content: space-between; }
    .table td.rcv-pos:empty { display: none; }
    .rcv-pont { min-width: 0; }
}

/* =====================================================================
   Backoffice → AR Online (`.aro-*`)
   ⚠️ As pílulas de situação têm fundo TRANSLÚCIDO e tinta por modo
   (`--alert-*-ink`): hex fixo de texto reprovaria num dos dois modos.
   ===================================================================== */
.aro-st { display: inline-block; padding: .18rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 700; line-height: 1.35; white-space: nowrap; vertical-align: middle; }
.aro-st-ok     { background: rgba(18, 161, 80, .14); color: var(--alert-success-ink); }
.aro-st-info   { background: rgba(29, 78, 216, .12); color: var(--alert-info-ink); }
.aro-st-aviso  { background: rgba(217, 119, 6, .16); color: var(--alert-warn-ink); }
.aro-st-ruim   { background: var(--danger-soft); color: var(--alert-error-ink); }
.aro-st-neutro { background: var(--pill-muted-bg); color: var(--pill-muted-ink); }
h1 .aro-st { font-size: .8rem; margin-left: .35rem; }

.aro-sub { display: block; font-size: .78rem; color: var(--muted); margin-top: .1rem; font-weight: 400; }
/* Ao lado do número, numa lista de pares: "0  0,0%", e não o percentual sozinho na linha de baixo. */
.aro-kv dd .aro-sub { display: inline; margin: 0 0 0 .35rem; }
.aro-erro { color: var(--alert-error-ink); }
.aro-ok { color: var(--alert-success-ink); font-weight: 600; }
.aro-migalha { margin: 0 0 .25rem; font-size: .82rem; color: var(--muted); }
.aro-migalha a { color: inherit; }
.aro-num, .table td.aro-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.table thead th.aro-num { text-align: right; }
.aro-vazio { padding: 1.2rem 0; }
.aro-acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }
/* O `.btn` do projeto nasce com largura total; numa fileira de ações ele tem o tamanho do texto. */
:is(.aro-acoes, .aro-botoes, .aro-inline, .aro-busca) :is(.btn, .btn-ghost) { width: auto; }
.aro-acoes-fixas { position: sticky; bottom: 0; z-index: 5; margin: 0 0 1rem; padding: .7rem 1rem; background: var(--card);
    border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: 0 -4px 14px -10px rgba(0, 0, 0, .35); }
.aro-botoes { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.aro-botoes form { margin: 0; }
.table-wrap + .aro-botoes { margin-top: .9rem; }
/* Links soltos em listas do módulo: mesmo desenho dos links de tabela (cor da marca + peso, sublinhado no hover). */
.aro-lista a, .aro-testes a { color: var(--primary); font-weight: 600; text-decoration: none; }
.aro-lista a:hover, .aro-lista a:focus-visible, .aro-testes a:hover, .aro-testes a:focus-visible { text-decoration: underline; }
.aro-inline { display: inline-flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .6rem 0 0; }
.aro-inline select { width: auto; max-width: 18rem; }
.aro-inline + details, .aro-inline + .aro-teste { margin-top: .8rem; }
.aro-perigo { margin: .5rem 0 1.5rem; text-align: right; }
.aro-acao-linha { white-space: nowrap; text-align: right; }
.aro-acao-linha form { display: inline; margin: 0; }
.aro-alerta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; }
.aro-alerta form { margin: 0; }
.aro-filtro { margin-bottom: .8rem; }
.aro-ff-botao { align-self: end; }
.aro-ff-botao .btn { width: 100%; }
.aro-ff-check { align-self: end; padding-bottom: .55rem; }
.ff .aro-ff-check .check input, .ff.aro-ff-check .check input, .aro-check input { width: auto; }
.aro-check { display: flex; align-items: center; gap: .5rem; margin: .8rem 0 .2rem; font-weight: 500; }
.aro-busca { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .8rem 0; }
.aro-busca input[type="search"] { flex: 1 1 16rem; max-width: 26rem; }
.aro-busca select { width: auto; max-width: 26rem; }
/* Fora de .field/.ff o campo sairia com a cara nativa do navegador: mesmo desenho da busca do CRM. */
.aro-busca input:not([type="hidden"]), .aro-busca select {
    padding: .5rem .7rem; border: 1px solid var(--control-border); border-radius: 9px;
    background: var(--surface); color: var(--text); font: inherit; outline: none;
}
.aro-busca input:focus, .aro-busca select:focus { border-color: var(--primary); background: var(--card); box-shadow: 0 0 0 3px var(--ring); }
.aro-resumo { margin: .2rem 0 .8rem; color: var(--muted); font-size: .86rem; }
.aro-det { margin-bottom: 1rem; }
.aro-det > summary { cursor: pointer; font-weight: 600; }
.aro-det[open] > summary { margin-bottom: .8rem; }
.aro-det-corpo { padding-top: .2rem; }
.aro-det-perigo { margin-top: 1rem; }
.aro-det-perigo > summary { cursor: pointer; color: var(--alert-error-ink); font-weight: 600; }
.aro-h2-sep { margin-top: 1.2rem; }
.aro-fs { border: 1px solid var(--card-border); border-radius: var(--radius); padding: .6rem .9rem .3rem; margin: 1rem 0; }
.aro-fs legend { padding: 0 .3rem; font-weight: 600; font-size: .9rem; }
.field .member-grid .check, .aro-fs .member-grid .check { display: flex; align-items: center; gap: .4rem; font-size: .88rem; font-weight: 500; color: var(--text); }

/* Passos da campanha (o assistente). */
.aro-passos { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1rem; padding: .35rem; background: var(--card);
    border: 1px solid var(--card-border); border-radius: var(--radius); }
.aro-passo { flex: 1 1 8rem; display: flex; align-items: center; gap: .5rem; padding: .55rem .75rem; border-radius: calc(var(--radius) - 4px);
    color: var(--text); text-decoration: none; font-weight: 600; font-size: .9rem; }
.aro-passo:hover { background: var(--surface); }
.aro-passo:focus-visible { outline: 3px solid var(--ring); outline-offset: -3px; }
.aro-passo-n { flex: none; display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
    border: 1px solid var(--control-border); font-size: .8rem; font-variant-numeric: tabular-nums; }
.aro-passo.is-feito .aro-passo-n { background: rgba(18, 161, 80, .14); color: var(--alert-success-ink); border-color: transparent; }
.aro-passo.is-atual { background: var(--primary-soft); color: var(--primary); }
.aro-passo.is-atual .aro-passo-n { background: var(--primary); color: var(--card); border-color: var(--primary); }

/* Listas e pares rótulo/valor. */
.aro-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .35rem 1rem; margin: 0; }
.aro-kv dt { color: var(--muted); font-size: .84rem; }
.aro-kv dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.aro-kv-quebra { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
.aro-kv-quebra dd { text-align: left; margin-bottom: .45rem; font-weight: 500; }
.aro-kv code, .aro-kv-quebra code { font-size: .74rem; }
.aro-lista { margin: .4rem 0; padding-left: 1.2rem; }
.aro-lista li { margin: .25rem 0; }
.aro-lista-ruim li::marker { color: var(--alert-error-ink); }
.aro-lista-aviso li::marker { color: var(--alert-warn-ink); }
.aro-passos-txt { padding-left: 1.2rem; }
.aro-passos-txt li { margin: .3rem 0; }
.aro-modelos { list-style: none; margin: 0; padding: 0; }
.aro-modelos li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; padding: .7rem 0; border-top: 1px solid var(--card-border); }
.aro-modelos li:first-child { border-top: 0; }
.aro-testes { list-style: none; margin: .4rem 0 0; padding: 0; }
.aro-testes li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem .8rem; padding: .5rem 0; border-top: 1px solid var(--card-border); }
.aro-teste { margin-top: 1rem; padding: .8rem 1rem; background: var(--surface); border-radius: var(--radius); font-size: .88rem; }
.aro-teste p { margin: .3rem 0; }
.aro-kv.aro-teste { margin-top: 1rem; }
.aro-det-aws { margin: 1.1rem 0 0; }
.aro-pre { margin: .5rem 0; padding: .7rem .9rem; background: var(--surface); border: 1px solid var(--card-border);
    border-radius: var(--radius); overflow-x: auto; font-size: .78rem; line-height: 1.45; }
.aro-pre code { white-space: pre; }
.aro-card h2 .aro-st { vertical-align: middle; margin-left: .4rem; font-size: .7rem; }
/* `.field-note` solto (fora do `.ff`) sairia do tamanho do texto: aqui é dica. */
.aro-card .field > .field-note, .aro-fs > .field-note { display: block; margin: .35rem 0 .4rem; font-size: .78rem; line-height: 1.4; color: var(--muted); opacity: 1; }
.aro-fs .aro-check { margin: .45rem 0 .15rem; }
.aro-fs .form-grid { margin-top: .7rem; }
.aro-copiar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.aro-copiar code { flex: 1 1 20rem; padding: .45rem .6rem; background: var(--surface); border-radius: 6px; overflow-wrap: anywhere; font-size: .8rem; }
.aro-mapa td { vertical-align: middle; }
.aro-mapa input[type="text"], .aro-mapa select { width: 100%; min-width: 8rem; }
.aro-mapa .aro-chave { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; }
.aro-ex { color: var(--muted); max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aro-amostra { margin-top: 1rem; }
.aro-amostra > summary { cursor: pointer; font-weight: 600; }
.aro-envio { display: grid; gap: .5rem; max-width: 40rem; }
.aro-envio label { font-weight: 600; }
.aro-envio .btn { justify-self: start; }

/* Progresso. */
.aro-barra { height: 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--card-border); overflow: hidden; min-width: 8rem; }
.aro-barra-grande { height: 12px; margin: .4rem 0 1rem; }
.aro-barra-fill { display: block; height: 100%; width: 0; background: var(--primary); border-radius: inherit; transition: width .4s ease; }
@media (prefers-reduced-motion: reduce) { .aro-barra-fill { transition: none; } }
.aro-numeros { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.aro-numeros > div { padding: .6rem .8rem; background: var(--surface); border-radius: 8px; font-size: .8rem; color: var(--muted); }
.aro-num-g { display: block; font-size: 1.5rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Linha do tempo do envio. */
.aro-tempo { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-left: 2px solid var(--card-border); }
.aro-tempo li { position: relative; padding: .1rem 0 .9rem .6rem; }
.aro-tempo li::before { content: ""; position: absolute; left: -1.53rem; top: .35rem; width: .7rem; height: .7rem; border-radius: 50%;
    background: var(--card); border: 2px solid var(--control-border); }
.aro-tempo li.aro-tempo-delivery::before, .aro-tempo li.aro-tempo-open::before, .aro-tempo li.aro-tempo-click::before { border-color: var(--alert-success-ink); background: var(--alert-success-ink); }
.aro-tempo li.aro-tempo-bounce::before, .aro-tempo li.aro-tempo-complaint::before, .aro-tempo li.aro-tempo-reject::before,
.aro-tempo li.aro-tempo-erro::before { border-color: var(--alert-error-ink); background: var(--alert-error-ink); }
.aro-tempo-q { display: block; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Editor do modelo: a área imita a folha (largura de A4 com margens). */
.aro-rte { overflow: visible; }
.aro-rte .rte-toolbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 4; }
.aro-area { min-height: 16rem; }
/* Cartões vizinhos do módulo (o `.card` do projeto não tem margem própria); dentro de .dash-stack quem espaça é o gap. */
.aro-card + .aro-card { margin-top: 1rem; }
.dash-stack > .aro-card + .aro-card, .dash-stack > .aro-card { margin-top: 0; }
/* O documento como uma FOLHA sobre a mesa — é a página que vai virar PDF. */
.aro-rte-folha { background: var(--surface); }
.aro-rte-folha .aro-folha {
    background: var(--card); border: 1px solid var(--card-border); border-radius: 4px;
    box-shadow: 0 1px 8px rgba(0, 0, 0, .06); margin: 1.2rem auto; max-height: none; overflow: visible;
}
.aro-folha { min-height: 28rem; max-width: 46rem; margin: 0 auto; padding: 2.2rem 2.4rem; }
.aro-area-email { min-height: 10rem; }
.aro-campos { position: relative; display: inline-block; }
.aro-campos > summary { list-style: none; cursor: pointer; }
.aro-campos > summary::-webkit-details-marker { display: none; }
.aro-campos-lista { position: absolute; z-index: 30; top: calc(100% + 4px); right: 0; width: 20rem; max-height: 22rem; overflow: auto;
    padding: .4rem; background: var(--card); border: 1px solid var(--card-border); border-radius: 10px; box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .35); }
.aro-campos-grupo { margin: .5rem .4rem .2rem; font-size: .72rem; font-weight: 700; color: var(--muted); }
.aro-campos-lista button { display: flex; width: 100%; justify-content: space-between; gap: .6rem; padding: .4rem .5rem; border: 0; border-radius: 6px;
    background: transparent; color: var(--text); font: inherit; font-size: .84rem; text-align: left; cursor: pointer; }
.aro-campos-lista button:hover, .aro-campos-lista button:focus-visible { background: var(--primary-soft); color: var(--primary); outline: none; }
.aro-campos-lista code { font-size: .74rem; color: var(--muted); }
@media (max-width: 640px) {
    .aro-campos-lista { right: auto; left: 0; width: min(20rem, 86vw); }
    .aro-folha { padding: 1.2rem 1rem; }
    .aro-passo { flex: 1 1 45%; }
    .aro-kv dd { text-align: left; }
    .aro-kv { grid-template-columns: minmax(0, 1fr); }
}