/* Portal Plano — Grupo Plano.
   Paleta e fontes espelham exatamente o captura-digisac (que por sua vez
   espelha design/input.css do gp-atendimento): navy #1E5099 primário, ouro
   #C9A84C único acento, vermelho #C0181C só erro/atraso. As duas telas
   (plug e portal) precisam parecer o mesmo produto. */

@font-face{font-family:"Montserrat";font-style:normal;font-weight:400 800;font-display:swap;
  src:url("/static/fonts/montserrat-latin.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:200 900;font-display:swap;
  src:url("/static/fonts/source-sans-3-latin.woff2") format("woff2")}

/* 2026-10-12 — o atributo `hidden` só vale display:none pela folha do
   navegador, e qualquer classe nossa com display:flex/grid passa por cima
   (ex.: .donna-painel/.plena-painel: o ✕ marcava hidden e o painel seguia
   aberto). Esta regra devolve ao `hidden` o significado de "sumiu". */
[hidden]{display:none !important}

/* Claro é o padrão. Sem escolha explícita do usuário, segue o sistema
   operacional (media query). Com escolha explícita (botão de tema, salvo em
   localStorage, aplicado como data-theme na tag <html>), essa escolha manda
   — inclusive DERRUBANDO o sistema operacional (por isso o :not([data-theme="light"])
   no escuro-por-sistema, e o bloco [data-theme="dark"] isolado repetindo os
   mesmos valores pra ganhar de qualquer jeito). */
:root{
  --bg:#f5f7fa; --card:#ffffff; --ink:#2b3440; --mut:#6b7280; --line:#e0e3ea;
  --brand:#1e5099; --brand-ct:#ffffff; --gold:#c9a84c;
  --logo-tri:#c41718; --chip:#eef2f7;
  --ok:#2e7d52; --okbg:#eef7f2; --err:#c0181c; --errbg:#fcf0f0;
  --warn:#8a6d1a; --warnbg:#fbf3de;
  --sombra: 0 1px 2px rgba(20,30,50,.06), 0 1px 1px rgba(20,30,50,.04);
  --topbar-bg: rgba(255,255,255,.72);
  --ease: cubic-bezier(.4,0,.6,1); /* 2026-09-10 — estudo apple.com/br: uma curva só, usada em tudo que muda de estado */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bg:#0f1b2d; --card:#152538; --ink:#e2e8f0; --mut:#9aa2b1; --line:#1e304a;
    --brand:#6b9bd8; --brand-ct:#0b1624; --gold:#d4b45f;
    --logo-tri:#e0575a; --chip:#1b2c42;
    --ok:#46a97b; --okbg:#0e2c22; --err:#e05252; --errbg:#2e1416;
    --warn:#e0c060; --warnbg:#2e2712;
    --sombra: 0 1px 2px rgba(0,0,0,.35);
    --topbar-bg: rgba(21,37,56,.72); }
}
:root[data-theme="dark"]{ --bg:#0f1b2d; --card:#152538; --ink:#e2e8f0; --mut:#9aa2b1; --line:#1e304a;
  --brand:#6b9bd8; --brand-ct:#0b1624; --gold:#d4b45f;
  --logo-tri:#e0575a; --chip:#1b2c42;
  --ok:#46a97b; --okbg:#0e2c22; --err:#e05252; --errbg:#2e1416;
  --warn:#e0c060; --warnbg:#2e2712;
  --sombra: 0 1px 2px rgba(0,0,0,.35);
  --topbar-bg: rgba(21,37,56,.72);
}
body{background:var(--bg);transition:background-color .15s var(--ease),color .15s var(--ease)}

/* Curva de movimento única (2026-09-10, refinamento inspirado no apple.com/br
   — ver auditoria no chat) — antes só existia 1 transition no arquivo
   inteiro, tudo trocava de estado seco. Agrupado aqui em vez de espalhar
   `transition` em cada regra, pra manter 1 lugar só de manutenção. */
button,.botao,
.topbar nav a,.app-switcher summary,.app-switcher-menu a,.tema-flutuante,
td,.badge,.paginador a,.cad-tab-btn,.fin-tabs a,.fin-neg-opcao,
.grade-clientes thead th,.grade-clientes tbody tr td,
input[type=text],input[type=password],input[type=email],input[type=number],select,textarea{
  transition:background-color .15s var(--ease),color .15s var(--ease),
    border-color .15s var(--ease),box-shadow .15s var(--ease),opacity .15s var(--ease);
}

.tema-flutuante{position:fixed;top:12px;right:16px;z-index:30;width:34px;height:34px;border-radius:99px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);box-shadow:var(--sombra);
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;padding:0}
.tema-flutuante:hover{background:var(--chip)}
.tema-flutuante .icone-escuro{display:none}
:root[data-theme="dark"] .tema-flutuante .icone-claro{display:none}
:root[data-theme="dark"] .tema-flutuante .icone-escuro{display:inline}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tema-flutuante .icone-claro{display:none}
  :root:not([data-theme="light"]) .tema-flutuante .icone-escuro{display:inline}
}
.topbar .tema-flutuante{position:static;box-shadow:none;margin-right:2px}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:14px/1.5 "Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:-.003em; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Montserrat",-apple-system,"Segoe UI",sans-serif;font-weight:700;margin:0 0 6px;letter-spacing:-.015em}
a{color:var(--brand)}

.topbar{display:flex;align-items:center;gap:16px;padding:10px 20px;background:var(--topbar-bg);
  -webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);
  border-bottom:2px solid var(--gold);position:sticky;top:0;z-index:5}
.topbar .marca{display:flex;align-items:center;gap:8px;font-family:"Montserrat",sans-serif;font-weight:700;color:var(--brand)}
.topbar nav{display:flex;gap:4px;flex:1}

/* App switcher — menu de "Minhas Aplicações", <details> nativo, sem JS */
.app-switcher{position:relative}
.app-switcher summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
  font-family:"Montserrat",sans-serif;font-weight:700;color:var(--brand);padding:4px 6px;border-radius:6px;
  user-select:none}
.app-switcher summary::-webkit-details-marker{display:none}
.app-switcher summary:hover{background:var(--chip)}
.app-switcher[open] summary{background:var(--chip)}
.app-switcher-menu{position:absolute;top:calc(100% + 6px);left:0;background:var(--card);border:1px solid var(--line);
  border-radius:10px;box-shadow:0 8px 24px rgba(20,30,50,.18);padding:8px;min-width:280px;z-index:20}
.app-switcher-titulo{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);
  font-weight:700;margin:4px 8px 8px}
.app-switcher-menu a{display:block;padding:8px 10px;border-radius:7px;text-decoration:none;color:var(--ink)}
.app-switcher-menu a:hover,.app-switcher-menu a.ativo{background:var(--chip)}
.app-switcher-menu a strong{display:block;font-family:"Montserrat",sans-serif;font-size:13.5px;color:var(--brand)}
.app-switcher-menu a .mut{font-size:12px}
.topbar nav a{padding:7px 12px;border-radius:6px;color:var(--ink);text-decoration:none;font-size:13.5px}
.topbar nav a.ativo,.topbar nav a:hover{background:var(--chip);color:var(--brand)}
.topbar .usuario-area{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--mut)}
.topbar form{margin:0}
.topbar button.linkbtn{background:none;border:none;color:var(--brand);cursor:pointer;font:inherit;padding:0}

/* Menu superior no celular (2026-09-10 — achado testando a tela Clientes no
   mobile: nav não quebrava linha, cortava "Agrupadore..." na borda). Em vez
   de encolher/cortar, cada bloco (marca, nav, usuário) vira sua própria
   linha cheia — e o próprio nav/usuario-area quebram os links deles se ainda
   não couber. Tira o `sticky` aqui porque 3 linhas de menu grudadas no topo
   comeria espaço demais numa tela de celular rolando uma lista grande. */
@media (max-width:680px){
  .topbar{flex-wrap:wrap;position:static;row-gap:6px}
  .topbar nav{flex:1 1 100%;flex-wrap:wrap}
  .topbar .usuario-area{flex:1 1 100%;flex-wrap:wrap}
}

/* 2026-09-11, pedido do Thiago: "a tela de todo o Portal Plano se expanda
   ao limite da tela assim como está do Digisac" — antes o `.wrap` padrão
   travava em 1180px e sobrava cinza enorme nas bordas em monitor largo.
   Tirei o teto (usa a tela inteira, só com respiro de padding); quem
   precisa ficar estreito de propósito (login, formulário avulso) usa
   `.estreito` — esse continua com teto próprio, senão um form de 3 campos
   fica bizarro esticado até a borda da tela. */
.wrap{max-width:none;margin:0;padding:24px 32px}
.wrap.estreito{max-width:520px;margin:0 auto}
.wrap.cheio{max-width:none;padding:0;display:flex;flex-direction:column;height:calc(100vh - 53px)}

.digisac-barra{display:flex;justify-content:space-between;gap:12px;padding:6px 16px;font-size:12px;
  background:var(--chip);border-bottom:1px solid var(--line);flex:none}
.digisac-dica{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 16px;
  font-size:12.5px;background:var(--okbg);border-bottom:1px solid var(--ok);flex:none}
.digisac-dica .secundario{flex:none;padding:4px 12px}
.iframe-digisac{flex:1;width:100%;border:none}

.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px;box-shadow:var(--sombra)}

.flash{background:var(--okbg);color:var(--ok);border:1px solid var(--ok);border-radius:8px;padding:10px 14px;margin-bottom:16px;font-size:13.5px}
.erro-msg{background:var(--errbg);color:var(--err);border:1px solid var(--err);border-radius:8px;padding:10px 14px;margin-bottom:16px;font-size:13.5px}

/* Kanban do Paralegal — 2026-09-11, layout que o Thiago lembrava do
   gp-paralegal antigo (resumo em pílulas + quadro arrastável por etapa).
   Prefixo "pl-" só pra deixar claro que é específico dessa tela — sem
   colisão com nada que já existia. */
.pl-resumo{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}
.pl-resumo-item{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  background:var(--card);border-radius:999px;padding:5px 14px;font-size:13px;color:var(--mut);text-decoration:none}
.pl-resumo-item strong{font-size:14px;font-weight:700;color:var(--brand)}
a.pl-resumo-item:hover{border-color:var(--brand);color:var(--ink)}
.pl-resumo-urgente strong{color:var(--err)}
.pl-resumo-aguardar strong{color:var(--warn)}

.pl-kanban{display:flex;gap:14px;align-items:flex-start;overflow-x:auto;padding-bottom:10px}
.pl-coluna{flex:0 0 250px;max-width:250px;background:var(--chip);border:1px solid var(--line);
  border-radius:12px;padding:10px;min-height:200px;max-height:calc(100vh - 260px);
  display:flex;flex-direction:column}
.pl-coluna-titulo{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mut);padding:2px 4px 10px;flex:none}
.pl-coluna-lista{min-height:60px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;flex:1 1 auto}
.pl-coluna-lista.pl-dropzone-ativa{outline:2px dashed var(--brand);outline-offset:-4px;border-radius:10px}
.pl-coluna-concluido{background:var(--okbg)}

.pl-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  font-size:12px;cursor:grab;box-shadow:var(--sombra);transition:box-shadow .15s var(--ease),border-color .15s var(--ease)}
.pl-card:hover{border-color:var(--brand)}
.pl-card.pl-arrastando{opacity:.4}
.pl-card-finalizado{cursor:default;opacity:.8}
.pl-card-exigencia{border-color:var(--warn);background:var(--warnbg)}
.pl-card-topo{display:flex;justify-content:space-between;align-items:center;gap:6px}
.pl-card-empresa{font-weight:700;font-size:12.5px;color:var(--ink);text-decoration:none}
.pl-card-empresa:hover{color:var(--brand)}
.pl-card-marcas{display:flex;align-items:center;gap:4px;flex:none;font-size:12px}
.pl-card-tipo{color:var(--mut);font-size:11px;margin:2px 0 4px}
.pl-card-rodape{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.pl-stepper-mini{display:flex;gap:3px}
.pl-bolinha{width:7px;height:7px;border-radius:50%;background:var(--line);display:inline-block}
.pl-bolinha-OK,.pl-bolinha-NAO_SE_APLICA{background:var(--ok)}
.pl-bolinha-EM_ANDAMENTO,.pl-bolinha-TAXA_LINK_ENVIADOS,.pl-bolinha-AGUARDANDO_ASSINATURA,
.pl-bolinha-PROTOCOLADO,.pl-bolinha-EM_ANALISE{background:var(--brand)}
.pl-bolinha-EXIGENCIA{background:var(--warn)}
.pl-idade-alta{color:var(--err);font-weight:700}
.pl-iniciais{width:20px;height:20px;border-radius:50%;background:var(--chip);color:var(--brand);
  font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}

label{display:block;font-size:12.5px;color:var(--mut);margin:10px 0 4px;font-weight:600}
input[type=text],input[type=password],input[type=email],input[type=number],select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:7px;background:var(--bg);
  color:var(--ink);font:inherit}
textarea{min-height:80px;resize:vertical}
button,.botao{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:980px;
  border:1px solid var(--brand);background:var(--brand);color:var(--brand-ct);font:inherit;font-weight:600;
  cursor:pointer;text-decoration:none}
button:hover,.botao:hover{opacity:.86}
button.secundario,.botao.secundario{background:transparent;color:var(--brand)}
button.perigo,.botao.perigo{background:var(--err);border-color:var(--err)}
/* Botão "de linha" (dentro de tabela/card compacto) continua retangular —
   pílula ali desperdiça espaço horizontal numa grade densa (ver auditoria
   apple.com/br: item 3, "pílula só no CTA de página"). */
button.pequeno,.botao.pequeno{padding:5px 9px;font-size:12.5px;font-weight:600;border-radius:7px}

.filtros{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin-bottom:16px}
.filtros .campo{min-width:150px}
.filtros label{margin:0 0 4px}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;color:var(--mut);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.03em;
  padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
tr.atrasada td{background:var(--errbg)}
tr:hover td{background:var(--chip)}

/* Painel de lista paginada — versão leve da grade de Clientes (2026-09-11),
   pra telas com poucas colunas e células com formulário embutido (Usuários):
   mesmo painel de altura fixa com scroll próprio, cabeçalho grudado no topo
   e ordenação por clique, mas SEM table-layout:fixed/colgroup/arrastar —
   aqui o texto não precisa truncar e as colunas não precisam ser
   redimensionadas/reordenadas pelo usuário. */
.tabela-paginada-wrap{max-height:65vh;overflow:auto;border-radius:10px}
.tabela-paginada{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
.tabela-paginada th,.tabela-paginada td{padding:8px 10px;border-bottom:1px solid var(--line)}
.tabela-paginada tbody tr:last-child td{border-bottom:none}
.tabela-paginada thead th{position:sticky;top:0;background:var(--card);z-index:2;
  box-shadow:inset 0 -1px 0 var(--line);text-align:left;color:var(--mut);font-weight:600;font-size:12px;
  text-transform:uppercase;letter-spacing:.03em}
.tabela-paginada thead th a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.tabela-paginada thead th a:hover{color:var(--brand)}

.badge{display:inline-block;padding:2px 9px;border-radius:99px;font-size:11.5px;font-weight:700;white-space:nowrap}
.badge.prioridade-urgente{background:var(--errbg);color:var(--err)}
.badge.prioridade-normal{background:var(--chip);color:var(--ink)}
.badge.prioridade-baixa{background:var(--okbg);color:var(--ok)}
.badge.status-nova{background:var(--chip);color:var(--ink)}
.badge.status-em_andamento{background:#e5edf9;color:var(--brand)}
.badge.status-aguardando_cliente{background:var(--warnbg);color:var(--warn)}
.badge.status-concluida{background:var(--okbg);color:var(--ok)}
.badge.status-cancelada{background:var(--chip);color:var(--mut);text-decoration:line-through}

/* 2026-09-11 — grade de Solicitações modelada no Onvio (ver app/routers/fila.py) */
.ponto-status{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle;background:var(--mut)}
.ponto-status.status-nova{background:var(--ink)}
.ponto-status.status-em_andamento{background:var(--brand)}
.ponto-status.status-aguardando_cliente{background:var(--warn)}
.ponto-status.status-concluida{background:var(--ok)}
.ponto-status.status-cancelada{background:var(--mut)}

/* Grade Fila reaproveita .grade-clientes (2026-09-11) — a coluna "Ações"
   precisa escapar do overflow:hidden padrão da grade pro menu "Mais ▾" não
   ficar cortado. */
.grade-clientes td[data-col="acoes"]{overflow:visible}

.row-menu{position:relative;display:inline-block}
.row-menu summary{list-style:none;cursor:pointer}
.row-menu summary::-webkit-details-marker{display:none}
.row-menu-lista{position:absolute;left:0;top:calc(100% + 4px);background:var(--card);border:1px solid var(--line);
  border-radius:8px;box-shadow:var(--sombra);padding:6px;min-width:220px;z-index:60;display:flex;flex-direction:column;gap:1px}
.row-menu-lista a,.row-menu-lista button{display:block;width:100%;text-align:left;padding:7px 9px;border-radius:6px;
  border:none;background:none;color:var(--ink);text-decoration:none;font:inherit;font-size:13px;cursor:pointer}
.row-menu-lista a:hover,.row-menu-lista button:hover{background:var(--chip)}
.row-menu-lista button.perigo-texto{color:var(--err)}

a.linkbtn{color:var(--brand);text-decoration:none;padding:5px 7px;border-radius:6px}
a.linkbtn:hover{background:var(--chip)}

@media print{
  .topbar,.tema-flutuante,.rodape,a.linkbtn,.row-menu,form button[type=submit],
  .card form:has(button.perigo),.card form:has(select[name=novo_status]),
  .card form:has(select[name=novo_responsavel_id]),.card form:has(select[name=novo_departamento_id]),
  .card form[action*="/redefinir-senha"]{display:none !important}
  body{background:#fff}
}
.badge.atraso{background:var(--err);color:#fff}

/* Tela Clientes em grade "estilo Domínio Sistemas" (2026-09-10, 3ª rodada —
   virou grid interativo de verdade: painel de altura fixa com scroll PRÓPRIO
   nos dois eixos, cabeçalho grudado no topo, colunas 2/3/4 grudadas na
   esquerda (a 1ª, Código, fica solta — ver .grade-clientes-wrap script no
   template), largura e ordem das colunas ajustáveis pelo usuário e salvas
   no localStorage (script no próprio clientes.html cuida de tudo isso —
   aqui só o CSS de apoio: table-layout:fixed pra <colgroup> mandar de
   verdade na largura, e as classes que o JS liga/desliga). */
.grade-clientes-wrap{max-height:72vh;overflow:auto;border-radius:10px}
.grade-clientes{min-width:2600px;border-collapse:separate;border-spacing:0;table-layout:fixed}
.grade-clientes th,.grade-clientes td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;position:relative}
.grade-clientes thead th{position:sticky;top:0;background:var(--card);z-index:2;box-shadow:inset 0 -1px 0 var(--line);user-select:none}
.grade-clientes thead th a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.grade-clientes thead th a:hover{color:var(--brand)}
.seta-ordem{color:var(--brand);font-size:11px}
/* .col-fixa e .col-fixa-borda são ligadas/desligadas via JS (recalcularFixas),
   não fixas por nth-child — assim continuam corretas mesmo depois que o
   usuário arrasta uma coluna pra outra posição. */
.grade-clientes td.col-fixa{position:sticky;background:var(--card);z-index:1}
.grade-clientes thead th.col-fixa{z-index:3}
.grade-clientes .col-fixa-borda{box-shadow:2px 0 4px -2px rgba(20,30,50,.18)}
.grade-clientes tbody tr{cursor:pointer}
.grade-clientes tr:hover td.col-fixa{background:var(--chip)}
.col-resize{position:absolute;right:0;top:0;bottom:0;width:7px;cursor:col-resize;touch-action:none}
.col-resize:hover,.col-resize:active{background:var(--brand);opacity:.4}
.col-mover{cursor:grab;color:var(--mut);font-size:11px;padding:0 5px 0 0;user-select:none}
.col-mover:active{cursor:grabbing}
.grade-clientes thead th.th-arrastando{opacity:.4}
.grade-clientes thead th.th-alvo{background:var(--chip);box-shadow:inset 2px 0 0 var(--brand),inset -2px 0 0 var(--brand)}
.nome-empresa{font-weight:600}
.situacao-ponto{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:12.5px}
.situacao-ponto.ativa{color:var(--ok)}
.situacao-ponto.inativa{color:var(--err)}

.grade-clientes-rodape{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;
  padding:12px 14px;border-top:1px solid var(--line);font-size:12.5px}
.paginador{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.paginador a{padding:5px 9px;border-radius:6px;color:var(--ink);text-decoration:none;font-weight:600;font-size:12.5px}
.paginador a:hover{background:var(--chip)}
.paginador a.pg-num.ativa{background:var(--brand);color:var(--brand-ct)}
.paginador a.desabilitado{pointer-events:none;opacity:.35}
.pg-reticencias{padding:5px 3px;color:var(--mut)}

.checklist{list-style:none;padding:0;margin:0}
.checklist li{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
.checklist li:last-child{border-bottom:none}
.checklist .concluido{color:var(--mut);text-decoration:line-through}
.checklist form{margin:0}
.checklist button{background:none;border:1px solid var(--line);border-radius:5px;padding:2px 8px;color:var(--ink);font-weight:400}

.historico{list-style:none;padding:0;margin:0;font-size:13px}
.historico li{padding:8px 0;border-bottom:1px solid var(--line);color:var(--mut)}
.historico li:last-child{border-bottom:none}
.historico .quando{font-size:11.5px}
.historico strong{color:var(--ink)}
.historico .tramite-texto{color:var(--ink);white-space:pre-wrap;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#lista-tramites.expandida .tramite-texto{-webkit-line-clamp:unset}

.grid-2{display:grid;grid-template-columns:2fr 1fr;gap:18px;align-items:start}
@media (max-width:860px){.grid-2{grid-template-columns:1fr}}

.form-2col{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.form-3col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 14px}
@media (max-width:640px){.form-2col,.form-3col{grid-template-columns:1fr}}

.metricas-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:20px}
.metrica{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px}
.metrica .valor{font-family:"Montserrat",sans-serif;font-size:28px;font-weight:800;color:var(--brand)}
.metrica .rotulo{font-size:12.5px;color:var(--mut)}

.rodape{text-align:center;color:var(--mut);font-size:11.5px;padding:30px 0 16px}
.mut{color:var(--mut)}
.sep{border:none;border-top:1px solid var(--line);margin:16px 0}

/* ---------------------------------------------------------- Financeiro do cliente (2026-09-09) */
.fin-topo{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.fin-tabs{display:flex;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:4px}
.fin-tabs a{padding:8px 16px;border-radius:7px;color:var(--ink);text-decoration:none;font-size:13.5px;font-weight:600}
.fin-tabs a.ativo{background:var(--brand);color:var(--brand-ct)}
.fin-tabs a:not(.ativo):hover{background:var(--chip)}

.fin-empresa-dd{position:relative}
.fin-empresa-dd summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  background:var(--card);border:1px solid var(--line);border-radius:9px;padding:9px 14px;font-size:13.5px;font-weight:600}
.fin-empresa-dd summary::-webkit-details-marker{display:none}
.fin-empresa-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:20;background:var(--card);
  border:1px solid var(--line);border-radius:10px;box-shadow:var(--sombra);padding:10px;min-width:260px;max-height:340px;overflow-y:auto}
.fin-empresa-menu label{display:flex;align-items:center;gap:8px;padding:6px 4px;font-size:13px;font-weight:400;cursor:pointer}
.fin-empresa-menu hr{border:none;border-top:1px solid var(--line);margin:6px 0}
.fin-empresa-menu button{width:100%;margin-top:8px}

.fin-blocos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:16px 0}
.fin-bloco{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;text-decoration:none;color:var(--ink);display:block}
.fin-bloco-hd{display:flex;align-items:center;gap:10px;padding:12px 14px;font-weight:700;font-size:13.5px;color:var(--brand-ct)}
.fin-bloco.avencer .fin-bloco-hd{background:var(--brand)}
.fin-bloco.vencidas .fin-bloco-hd{background:var(--err)}
.fin-bloco.parc-avencer .fin-bloco-hd{background:var(--gold);color:#3a2c00}
.fin-bloco.parc-vencidas .fin-bloco-hd{background:#8a1c1c}
.fin-bloco.liquidadas .fin-bloco-hd{background:var(--ok)}
.fin-bloco-body{padding:8px 14px 12px}
.fin-bloco-row{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;padding:5px 0;border-bottom:1px solid var(--line)}
.fin-bloco-row:last-child{border-bottom:none}
.fin-bloco-total{display:flex;justify-content:space-between;padding-top:8px;font-size:13px;font-weight:700}
.fin-bloco-vazio{padding:14px 0;text-align:center;color:var(--mut);font-size:12.5px}

.fin-neg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:16px 0}
.fin-neg-box{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px}
.fin-neg-titulo{font-weight:700;font-size:14px;margin-bottom:10px}
.fin-neg-opcao{display:block;width:100%;text-align:left;background:var(--chip);border:1px solid var(--line);
  border-radius:8px;padding:10px 12px;font-size:12.5px;color:var(--ink);cursor:pointer;margin-bottom:6px;font-family:inherit}
.fin-neg-opcao:hover{border-color:var(--brand)}
.fin-neg-opcao:last-child{margin-bottom:0}

.fin-whatsapp-btn{position:fixed;bottom:24px;right:24px;z-index:50;width:56px;height:56px;background:#25d366;
  border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(37,211,102,.4);
  text-decoration:none;color:#fff}
.fin-whatsapp-btn:hover{transform:scale(1.06)}

.fin-tutorial-btn{background:none;border:none;color:var(--brand);font-size:12px;font-weight:600;cursor:pointer;padding:0;margin-left:4px}
.fin-tutorial-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200;align-items:center;justify-content:center;padding:16px}
.fin-tutorial-modal.aberto{display:flex}
.fin-tutorial-modal-box{background:var(--card);border-radius:12px;max-width:720px;width:100%;overflow:hidden}
.fin-tutorial-modal-hd{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);font-weight:700}
.fin-tutorial-modal-hd button{background:none;border:none;font-size:18px;cursor:pointer;color:var(--mut)}
.fin-tutorial-modal video{display:block;width:100%;max-height:70vh;background:#000}
.fin-tutorial-popup{display:none;position:fixed;bottom:24px;right:24px;z-index:150;max-width:320px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sombra);padding:16px}
.fin-tutorial-popup.aberto{display:block}
.fin-tutorial-popup h4{margin:0 0 6px}
.fin-tutorial-popup p{margin:0 0 12px;font-size:12.5px;color:var(--mut)}
.fin-tutorial-popup label{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--mut);margin-top:10px}

.fin-neg-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:180;align-items:center;justify-content:center;padding:16px}
.fin-neg-modal.aberto{display:flex}
.fin-neg-modal-box{background:var(--card);border-radius:12px;max-width:520px;width:100%;max-height:88vh;display:flex;flex-direction:column}
.fin-neg-modal-hd{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);font-weight:700}
.fin-neg-modal-hd button{background:none;border:none;font-size:18px;cursor:pointer;color:var(--mut)}
.fin-neg-modal-body{padding:16px 18px;overflow-y:auto;flex:1}
.fin-neg-modal-body label{display:block;margin-bottom:4px;font-size:12.5px;font-weight:600}
.fin-neg-modal-body textarea,.fin-neg-modal-body input[type=text]{width:100%;box-sizing:border-box;border:1px solid var(--line);
  border-radius:7px;padding:8px 10px;background:var(--bg);color:var(--ink);font:inherit}
.fin-neg-modal-ft{display:flex;justify-content:flex-end;gap:8px;padding:14px 18px;border-top:1px solid var(--line)}
.fin-neg-fatura-row{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--line);font-size:12.5px;cursor:pointer}
.fin-neg-fatura-row:last-child{border-bottom:none}
.fin-neg-total{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:13px}

.fin-contratos-grid,.fin-faturas-grid{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.fin-linha{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.fin-linha:last-child{border-bottom:none}
.fin-linha .fin-acoes{display:flex;gap:6px;flex-wrap:wrap}
.fin-linha .fin-acoes .botao{padding:6px 10px;font-size:12px}

/* ---------------------------------------------------------- Cadastro de Empresa em abas (2026-09-10, moldes Domínio Sistemas) */
.cad-topo{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.cad-codigo{font-size:12px;color:var(--mut)}
.cad-tabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:2px solid var(--line);margin-bottom:16px}
.cad-tab-btn{background:var(--chip);border:1px solid var(--line);border-bottom:none;border-radius:7px 7px 0 0;
  padding:8px 14px;font-size:12.5px;font-weight:600;color:var(--mut);cursor:pointer;margin-bottom:-2px}
.cad-tab-btn.ativa{background:var(--card);color:var(--brand);border-color:var(--line);border-bottom:2px solid var(--card)}
.cad-tab-painel{display:none}
.cad-tab-painel.ativa{display:block}
.cad-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 14px;margin-bottom:10px}
.cad-grid .campo-largo{grid-column:1/-1}
.cad-grid label{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--mut);margin:0 0 3px;display:block}
.cad-grid input,.cad-grid select,.cad-grid textarea{width:100%;box-sizing:border-box;margin:0}
.cad-secao-titulo{font-size:12.5px;font-weight:700;color:var(--brand);margin:18px 0 8px;text-transform:uppercase;letter-spacing:.03em}
.cad-secao-titulo:first-child{margin-top:0}
.cad-socio-row{display:flex;align-items:baseline;gap:14px;padding:7px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.cad-socio-row:last-child{border-bottom:none}
.cad-socio-row>span:first-child{flex:1}

/* Quadro Societário em grade (2026-09-10, moldes Domínio Sistemas — print "Distribuição do capital"/"Sócios") */
.cad-socios-scroll{overflow-x:auto;margin-bottom:10px}
.cad-socios-tabela{min-width:760px}
.cad-socios-tabela th{white-space:nowrap}
.cad-socios-tabela td{padding:6px 8px}
.cad-socios-tabela input,.cad-socios-tabela select{padding:6px 8px;font-size:12.5px;min-width:80px}
.cad-socios-tabela input[data-campo="nome"]{min-width:180px}
.cad-socios-tabela input[data-campo="ordem"]{min-width:50px;text-align:center}
.cad-socios-tabela .col-excluir{width:1%;white-space:nowrap}

/* Kanban de Etapas do Fluxo de Tarefas (2026-09-12, Fase 2 — "segue com o
   kanban de etapas do fluxo"). Sem drag-and-drop (ver comentário junto de
   EtapaFluxo em app/models.py) — reordena por botão, por isso não precisa
   de nenhuma lib de JS. */
.kanban{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px}
.kanban-coluna{flex:0 0 260px;background:var(--chip);border:1px solid var(--line);border-radius:9px;padding:10px;display:flex;flex-direction:column;gap:8px}
.kanban-coluna-titulo{display:flex;justify-content:space-between;align-items:center;gap:6px}
.kanban-coluna-titulo h4{margin:0;font-size:13px}
.kanban-cartao{background:var(--card);border:1px solid var(--line);border-radius:7px;padding:8px 10px;font-size:12.5px}
.kanban-cartao-nome{font-weight:700;margin:0 0 2px}
.kanban-cartao-meta{color:var(--mut);font-size:11.5px;margin:0 0 6px}
.kanban-cartao-acoes{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.kanban-cartao-acoes button,.kanban-cartao-acoes .botao{padding:2px 7px;font-size:11px}
.kanban-nova-coluna{flex:0 0 220px}

/* DONNA — assistente interna, widget flutuante (2026-09-14, Fase 1 e 2 —
   ver docs-agentes-donna-plena.md). z-index acima de tudo que já existe no
   projeto (o mais alto até aqui era 30, do .tema-flutuante) — o painel
   precisa ficar por cima até de coisas como o kanban. */
.donna-flutuante{position:fixed;right:20px;bottom:20px;z-index:40;width:52px;height:52px;border-radius:99px;
  border:1px solid var(--line);background:var(--card);box-shadow:var(--sombra);
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.donna-flutuante:hover{opacity:.88}
.donna-flutuante img{border-radius:99px}
.donna-bolinha{position:absolute;top:2px;right:2px;width:12px;height:12px;border-radius:99px;
  background:var(--err);border:2px solid var(--card)}
.donna-painel{position:fixed;right:20px;bottom:82px;z-index:40;width:320px;max-height:460px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sombra);
  display:flex;flex-direction:column;overflow:hidden}
.donna-painel-topo{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--chip)}
.donna-painel-topo strong{flex:1;font-size:13px}
.donna-painel-topo img{border-radius:99px}
.donna-mensagens{flex:1;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px;min-height:180px;max-height:320px}
.donna-msg{padding:7px 10px;border-radius:9px;font-size:12.5px;line-height:1.45;max-width:85%;white-space:pre-wrap;word-wrap:break-word}
.donna-msg-donna{background:var(--chip);align-self:flex-start}
.donna-msg-usuario{background:var(--brand);color:var(--brand-ct);align-self:flex-end}
.donna-msg-sistema{background:var(--warnbg);color:var(--warn);align-self:flex-start;font-style:italic}
.donna-acao-pendente{align-self:stretch;background:var(--chip);border:1px solid var(--line);border-radius:9px;
  padding:8px 10px;font-size:12.5px}
.donna-acao-pendente p{margin:0 0 6px}
.donna-acao-botoes{display:flex;gap:6px}
.donna-acao-botoes button{padding:4px 10px;font-size:12px}
.donna-form{display:flex;gap:6px;padding:10px 12px;border-top:1px solid var(--line)}
.donna-form input{flex:1;margin:0}
@media (max-width:480px){.donna-painel{right:10px;left:10px;width:auto;bottom:76px}.donna-flutuante{right:14px;bottom:14px}}

/* PLENA — assistente do Portal do Cliente (2026-09-14, Fase 1 — ver
   docs-agentes-donna-plena.md). Empilhada ACIMA do botão de WhatsApp que
   já existia ali (.fin-whatsapp-btn: bottom:24px, right:24px, 56px,
   z-index:50) — mesmo right:24px pra alinhar, bottom calculado pra
   encostar logo acima dele (24+56+10=90) sem sobrepor. Reaproveita
   .donna-mensagens/.donna-msg/.donna-form (bolhas de chat genéricas,
   nada específico da DONNA nelas) — só o botão/painel têm classe própria
   por causa da posição diferente. */
.plena-flutuante{position:fixed;right:24px;bottom:90px;z-index:50;width:52px;height:52px;border-radius:99px;
  border:1px solid var(--line);background:var(--card);box-shadow:var(--sombra);
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.plena-flutuante:hover{opacity:.88}
.plena-flutuante img{border-radius:99px}
.plena-painel{position:fixed;right:24px;bottom:152px;z-index:50;width:320px;max-height:460px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sombra);
  display:flex;flex-direction:column;overflow:hidden}
.plena-painel-topo{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--chip)}
.plena-painel-topo strong{flex:1;font-size:13px}
.plena-painel-topo img{border-radius:99px}
@media (max-width:480px){.plena-painel{right:10px;left:10px;width:auto;bottom:144px}.plena-flutuante{right:14px;bottom:80px}}

/* 2026-10-12 — OS gerada de conversa do Digisac (app/digisac_os.py): selo na
   grade/detalhe e a conversa completa, recolhível, no detalhe da OS. */
.badge.os{background:var(--brand);color:var(--brand-ct);font-size:10.5px;padding:1px 7px;vertical-align:1px}
.os-conversa{margin-top:14px;border:1px solid var(--line);border-radius:9px;background:var(--bg)}
.os-conversa summary{cursor:pointer;padding:9px 12px;font-size:12.5px;font-weight:600}
.os-conversa-lista{display:flex;flex-direction:column;gap:6px;padding:4px 12px 12px;max-height:420px;overflow-y:auto}
.os-msg{max-width:85%;padding:6px 10px;border-radius:9px;font-size:12.5px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
.os-msg .mut{display:block;font-size:11px;margin-bottom:2px}
.os-msg-cliente{background:var(--card);border:1px solid var(--line);align-self:flex-start}
.os-msg-equipe{background:var(--chip);align-self:flex-end}
.os-msg-sistema{align-self:center;max-width:100%;font-size:11.5px;font-style:italic;color:var(--mut);padding:2px 8px}

/* 2026-10-12 — assunto na grade sem sublinhado (pedido do Thiago); continua
   clicável, sublinha só no hover pra deixar claro que é link. */
td[data-col="assunto"] a{text-decoration:none}
td[data-col="assunto"] a:hover{text-decoration:underline}
.grade-clientes td.menu-aberto{z-index:50 !important}

/* 2026-10-12 — grade da Central: largura = soma das colunas (o min-width de
   2600px da .grade-clientes impedia encolher o Nº); barra horizontal no TOPO,
   sincronizada por JS; a de baixo some no Chrome/Edge (no Firefox fica as duas). */
.grade-clientes.grade-fila{min-width:0}
.grade-scroll-topo{overflow-x:auto;overflow-y:hidden;height:14px;border-radius:10px 10px 0 0}
.grade-scroll-topo > div{height:1px}
.grade-fila-wrap::-webkit-scrollbar{width:10px;height:0}
.grade-fila-wrap::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}
.badge.msg-nova{background:var(--warn);color:#fff;font-size:10.5px;padding:1px 7px;vertical-align:1px}


/* 2026-10-12 — Métricas de Atendimentos (templates/metricas_atend.html).
   Gráficos em HTML/CSS puro: barras horizontais, colunas por dia e mapa de
   calor por color-mix sobre --brand (acompanha o tema claro/escuro). */
.met-sub{margin:0 0 14px;font-size:13px}
.met-filtros{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;padding:14px;margin-bottom:14px}
.met-filtros label{display:flex;flex-direction:column;gap:4px;font-size:12px;margin:0}
.met-filtros select,.met-filtros input[type=text],.met-filtros input[type=date]{min-width:150px;margin:0}
.met-filtros .met-check{flex-direction:row;align-items:center;gap:6px;text-transform:none;letter-spacing:0;font-weight:400;font-size:13px}
.met-filtros .met-check input{width:auto;margin:0}
.met-datas{display:flex;gap:10px}
.met-abas{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto}
.met-abas a{padding:9px 14px;text-decoration:none;color:var(--mut);border-bottom:2px solid transparent;white-space:nowrap;font-weight:600;font-size:13.5px}
.met-abas a.ativo{color:var(--brand);border-bottom-color:var(--brand)}
.met-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.met-chips a{padding:4px 11px;border:1px solid var(--line);border-radius:99px;text-decoration:none;color:var(--ink);font-size:12.5px}
.met-chips a.ativo{background:var(--brand);border-color:var(--brand);color:var(--brand-ct)}
.met-titulo{display:flex;align-items:center;gap:8px;margin:6px 0 10px}
.met-cards .metrica .valor{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.met-cards .metrica .rotulo{line-height:1.4}
.met-delta{font-size:12px;font-weight:700;padding:1px 6px;border-radius:99px}
.met-delta.bom{background:var(--okbg);color:var(--ok)}
.met-delta.ruim{background:var(--errbg);color:var(--err)}
.met-delta.neutro{background:var(--chip);color:var(--mut)}
.met-nota{font-size:12px;margin:6px 0 0}
.met-scroll{overflow-x:auto}
.met-tabela{width:100%;border-collapse:collapse;font-size:13px}
.met-tabela th{font-size:11.5px;text-align:left;white-space:nowrap;padding:7px 8px;border-bottom:1px solid var(--line);color:var(--mut)}
.met-tabela td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.met-tabela .n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.met-tabela a{text-decoration:none}
.met-tabela a:hover{text-decoration:underline}
.met-tabela tr.met-inativo td{color:var(--mut)}
.met-tabela tr.met-total td{font-weight:700;border-top:2px solid var(--line)}
.met-tabela .met-atual{background:color-mix(in srgb,var(--brand) 8%,transparent)}
.met-tend{font-weight:700}
.met-sem{display:inline-block;width:10px;height:10px;border-radius:99px;margin-right:7px;vertical-align:0}
.met-sem-verde{background:var(--ok)}
.met-sem-amarelo{background:#d9a422}
.met-sem-vermelho{background:var(--err)}
.met-alertas{display:flex;flex-wrap:wrap;gap:4px}
.met-alerta{font-size:11.5px;padding:2px 8px;border-radius:99px;white-space:nowrap}
.met-alerta.amarelo{background:var(--warnbg);color:var(--warn)}
.met-alerta.vermelho{background:var(--errbg);color:var(--err)}
.met-barra{display:inline-block;width:100%;max-width:140px;height:8px;background:var(--chip);border-radius:99px;overflow:hidden;vertical-align:middle;margin-right:6px}
.met-barra span{display:block;height:100%;background:var(--brand);border-radius:99px}
.met-dist{display:grid;grid-template-columns:90px 1fr 90px;align-items:center;gap:8px;font-size:12.5px;margin:6px 0}
.met-dist .met-barra{max-width:none;height:12px}
.met-dist-n{text-align:right;color:var(--mut);font-variant-numeric:tabular-nums}
.met-colunas{display:flex;align-items:flex-end;gap:6px;height:190px;overflow-x:auto;padding-top:6px}
.met-coluna{flex:1 0 26px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;font-size:11px}
.met-coluna-barra{width:70%;min-height:2px;background:var(--brand);border-radius:4px 4px 0 0}
.met-coluna-n{font-weight:700;margin-bottom:2px}
.met-coluna-rot{color:var(--mut);margin-top:4px;text-align:center;line-height:1.2}
.met-calor-wrap{overflow-x:auto}
.met-calor{width:auto;border-collapse:separate;border-spacing:2px;font-size:11px}
.met-calor th{color:var(--mut);font-weight:600;padding:2px 4px;text-align:center}
.met-calor td{width:34px;height:26px;text-align:center;border-radius:4px;font-variant-numeric:tabular-nums;
  background:color-mix(in srgb,var(--brand) var(--i),var(--chip));color:var(--ink)}
.met-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.met-metodo summary{cursor:pointer;font-weight:600}
.met-metodo ul{margin:10px 0 0;padding-left:18px;font-size:13px;line-height:1.6}
@media (max-width:900px){.met-grid-2{grid-template-columns:1fr}}
.met-calor td.forte{color:var(--brand-ct);font-weight:700}

/* 2026-10-12 — Métricas, Fase 3: fechamentos semanais (templates/_metricas_fechamentos.html) */
.met-citacao{border-left:3px solid var(--line);padding:6px 10px;margin:6px 0;background:var(--bg);border-radius:0 8px 8px 0;font-size:13px}
.met-citacao .mut{display:block;font-size:11.5px;margin-bottom:2px}
.met-citacao mark{background:var(--warnbg);color:var(--warn);padding:0 2px;border-radius:3px}
.met-citacao.CLIENTE{border-left-color:var(--gold)}
.met-citacao.PLANO{border-left-color:var(--brand)}
.met-rec ol,.met-rec ul{margin:6px 0 0;padding-left:20px;line-height:1.55;font-size:13.5px}
.met-rec li{margin-bottom:6px}
.met-versao-sel{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;padding:14px;margin-bottom:14px}
.met-versao-sel label{display:flex;flex-direction:column;gap:4px;font-size:12px;margin:0}
.met-versao-sel select{min-width:220px;margin:0}