:root {
    /* Identidade visual PH3A (www.ph3a.com.br) */
    --azul: #051F4E;        /* navy primária PH3A */
    --azul-claro: #0a316f;
    --acento: #FF511B;      /* laranja PH3A (CTA/destaque) */
    --ph3a: #051F4E;        /* tag PH3A = navy */
    --gopoints: #FF511B;    /* tag Gopoints = laranja PH3A */
    --cinza: #4b4b4b;       /* texto suave PH3A */
    --borda: #e9eaec;       /* borda PH3A */
    --fundo: #F5F6FA;       /* fundo PH3A */
    --branco: #fff;
    --texto: #1f1f1f;
    --primaria: #051F4E;    /* alias da navy primária (sessão expirada, modal, detalhe) */
    --texto-2: #4b4b4b;     /* texto secundário/suave (= --cinza) */
    --fonte-titulo: "Poppins", "Volte", Arial, sans-serif;   /* PH3A: Volte→Poppins */
    --fonte-corpo: "Open Sans", Arial, sans-serif;           /* PH3A: Open Sans */
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* o atributo hidden vence classes como .btn */
body {
    margin: 0; font-family: var(--fonte-corpo);
    background: var(--fundo); color: var(--texto);
}
h1, h2, h3, .topo__marca, .kpi__num { font-family: var(--fonte-titulo); }
/* header + banner de simulação grudam JUNTOS no topo (pedido Paulo 16/07: o banner laranja "Você
   está vendo como…" subia por baixo do menu ao rolar, porque só o .topo era sticky). Agrupá-los num
   contêiner sticky resolve sem depender da altura do header, que varia (o menu quebra em 2 linhas). */
.topo-fixo { position: sticky; top: 0; z-index: 50; }
.topo {
    background: var(--azul);
    color: var(--branco); padding: 16px 28px; display: flex; align-items: center;
    gap: 20px; flex-wrap: wrap;
}
.topo__marca { font-size: 1.5rem; font-weight: 800; }
.topo__marca span { color: var(--acento); }
/* Canto sup. esquerdo: ☰ + versão empilhados (pedido Paulo 11/07). No desktop o ☰ some → só a versão. */
.topo__canto { display: flex; flex-direction: column; align-items: center; gap: 2px; }
/* Ações do topo (⬇ CSV + ⟳ Capturar) juntas e empurradas pra direita — não quebram separadas. */
.topo__acoes { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: nowrap; }
/* Abas dos 2 ASSUNTOS (RFP/Licitação x Legislação) — quebram a linha inteira */
.topo__abas { display: flex; gap: 8px; flex-basis: 100%; order: 3; margin-top: 4px; }
.topo__abas .aba {
    color: #cbd5e1; text-decoration: none; font-family: var(--fonte-titulo);
    font-weight: 700; font-size: .95rem; padding: 8px 16px; border-radius: 10px 10px 0 0;
    border-bottom: 3px solid transparent;
}
.topo__abas .aba:hover { background: rgba(255,255,255,.10); color: #fff; }
.topo__abas .aba--ativa { background: rgba(255,255,255,.14); color: #fff; border-bottom-color: var(--acento); }
.topo__nav { display: flex; flex-wrap: wrap; gap: 6px; row-gap: 6px; order: 4; flex-basis: 100%; align-items: center; }
.drawer-marca { display: none; }   /* logo no topo da gaveta — só no celular (body.mais-aberto) */
.topo__nav a { color: #cbd5e1; text-decoration: none; padding: 6px 12px; border-radius: 8px; font-size: .9rem; font-weight: 600; }
.topo__nav a:hover { background: rgba(255,255,255,.12); color: #fff; }
/* item ATIVO (página atual) — laranja PH3A pra o usuário saber onde está (pedido Paulo 10/07) */
.topo__nav a.is-ativo, .topo__nav a.is-ativo:hover { background: var(--acento); color: #fff; }
/* menu agrupado: separador entre grupos + dropdown "⚙️ Gestão" (pedido Paulo 10/07 — A+B) */
.nav-sep { width: 1px; height: 20px; align-self: center; background: rgba(255,255,255,.20); margin: 0 4px; }
.nav-gestao { position: relative; }
.nav-gestao > summary { list-style: none; cursor: pointer; color: #cbd5e1; padding: 6px 12px;
    border-radius: 8px; font-size: .9rem; font-weight: 600; white-space: nowrap; }
.nav-gestao > summary::-webkit-details-marker { display: none; }
.nav-gestao > summary::after { content: " ▾"; opacity: .7; }
.nav-gestao > summary:hover, .nav-gestao[open] > summary { background: rgba(255,255,255,.12); color: #fff; }
.nav-gestao > summary.is-ativo { background: var(--acento); color: #fff; }  /* página atual está no menu */
.nav-gestao__menu { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.nav-gestao__div { height: 1px; background: rgba(255, 255, 255, .16); margin: 5px 6px; }  /* divisor no dropdown */
@media (min-width: 821px) {  /* desktop: vira cartão flutuante; no celular fica inline na gaveta */
    .nav-gestao__menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; min-width: 210px;
        background: var(--primaria); border: 1px solid rgba(255,255,255,.16); border-radius: 10px;
        padding: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.35); }
}
.topo__sub { color: #cbd5e1; font-size: .85rem; flex: 1; min-width: 200px; }
/* Módulo Legislação (normas/temas) */
.bloco-mini { display: block; color: var(--cinza); font-size: .82rem; margin-top: 3px; line-height: 1.35; }
.tema-nome { font-weight: 600; }
.vazio-card { background: var(--branco); border: 1px solid var(--borda); border-radius: 12px; padding: 28px; text-align: center; margin-top: 14px; }
.vazio-card p { margin: 6px 0; }
/* Coluna "Temas afetados · % de chance" (nome | % com medalha) */
.tema-chance { border-collapse: collapse; width: 100%; }
.tema-chance td { padding: 1px 0; border: none; vertical-align: middle; }
.tema-chance__nome { font-size: .88rem; padding-right: 12px !important; }
.tema-chance__pct { text-align: right; white-space: nowrap; }
.tema-chance__pct b { font-variant-numeric: tabular-nums; }

/* "Ver como vendedor" (admin simula a tela) — select no nav + banner global */
.ver-como { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25);
    border-radius: 8px; padding: 5px 8px; font-size: .82rem; font-weight: 600; cursor: pointer; }
.ver-como option { color: #1f1f1f; }
.sim-banner { background: var(--acento); color: #fff; padding: 10px 28px; font-size: .9rem;
    font-weight: 600; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sim-banner__sair { color: #fff; text-decoration: underline; font-weight: 800; margin-left: auto; }

/* Aviso de sessão expirada (sessao.js) — barra fixa no topo, acima de tudo. */
.sessao-expirada { position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
    background: var(--primaria); color: #fff; padding: 12px 28px; font-size: .95rem;
    font-weight: 600; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,.25); }

/* Radar de normas: caixa das NOVAS no topo + badge 🆕 + modal "Capturar?". */
.normas-novas { background: #fff7f3; border: 1px solid var(--acento); border-radius: 10px;
    padding: 12px 16px; margin: 0 0 16px; }
.normas-novas > strong { color: var(--acento); }
.normas-novas ul { margin: 8px 0 0; padding-left: 18px; }
.normas-novas li { margin: 4px 0; }
.normas-novas li small { color: var(--texto-2); margin-left: 6px; }
.badge-nova { margin-right: 4px; }

.modal-overlay { display: none; position: fixed; inset: 0; z-index: 9998;
    background: rgba(5,31,78,.55); align-items: center; justify-content: center; padding: 20px; }
.modal-box { background: #fff; border-radius: 14px; padding: 26px 28px; max-width: 460px; width: 100%;
    box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.modal-titulo { margin: 0 0 10px; color: var(--primaria); font-size: 1.2rem; }
/* lista de vendedores (checkboxes) do modal 📣 À força de venda */
.mv-lista { max-height: 300px; overflow-y: auto; margin: 8px 0 4px; border: 1px solid var(--borda); border-radius: 8px; }
.mv-item { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid #eef1f5; cursor: pointer; font-size: .9rem; }
.mv-item:last-child { border-bottom: 0; }
.mv-item:hover { background: #fff7f1; }
.modal-texto { margin: 0 0 20px; color: var(--texto); line-height: 1.5; }
.modal-acoes { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.dlg-msg { white-space: pre-line; }
.dlg-opcoes { display: flex; flex-direction: column; gap: 9px; margin: 0 0 14px; text-align: left; }
.dlg-opcoes label { display: flex; gap: 8px; align-items: center; color: var(--texto); cursor: pointer; }
.dlg-input--outro { flex: 1; margin: 0; padding: 6px 9px; }
.dlg-erro { color: #c0262b; font-size: .85rem; margin: 0 0 12px; }
.voltar-wrap { margin: 0 0 12px; }
.btn-voltar { background: #fff; }
.dlg-input { width: 100%; padding: 9px 11px; border: 1px solid var(--borda); border-radius: 8px;
    font-size: 16px; margin: 0 0 20px; box-sizing: border-box; }

.captura-barra { background: #0f2d4d; color: #fff; padding: 10px 28px; }
.captura-barra__x {
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); color: #fff;
    border-radius: 8px; padding: 2px 9px; font-size: .74rem; font-weight: 600; cursor: pointer;
    font-family: inherit; margin-left: 10px;
}
.captura-barra__x:hover { background: var(--acento); border-color: var(--acento); }
.captura-barra__x[hidden] { display: none; }
.captura-barra__info { display: flex; justify-content: space-between; font-size: .82rem; margin-bottom: 6px; }
.captura-barra__trilho { height: 8px; background: rgba(255,255,255,.18); border-radius: 999px; overflow: hidden; }
.captura-barra__fill { display: block; height: 100%; width: 0; min-width: 8px; background: var(--acento);
    transition: width .4s ease;
    background-image: linear-gradient(45deg, rgba(255,255,255,.30) 25%, transparent 25%, transparent 50%,
        rgba(255,255,255,.30) 50%, rgba(255,255,255,.30) 75%, transparent 75%, transparent);
    background-size: 24px 24px; animation: progAndando .7s linear infinite; }
.conteudo { max-width: 1600px; margin: 24px auto; padding: 0 20px; }

.kpis { display: flex; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.kpi {
    background: var(--branco); border: 1px solid var(--borda); border-radius: 12px;
    padding: 16px 22px; min-width: 180px; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.kpi__num { display: block; font-size: 2rem; font-weight: 800; color: var(--azul-claro); }
.kpi__lbl { color: var(--cinza); font-size: .82rem; }
/* KPIs de BREAKDOWN (por medalha / por produto) — vários valores em vez de 1 número */
.kpi--bd { display: flex; flex-direction: column; justify-content: center; max-width: 360px; }
/* O card de PRODUTOS estica no espaço que sobra e quebra os chips DENTRO dele — assim a faixa de
   KPIs cabe numa LINHA só (pedido Paulo 15/07). `min-width: 0` deixa encolher em tela menor; o
   `flex-wrap` da .kpis segue valendo (no celular ele cai pra baixo, como os outros). */
.kpi--produtos { flex: 1 1 300px; max-width: none; min-width: 0; }
.kpi__bd { display: flex; flex-wrap: wrap; gap: 5px 14px; align-items: center; margin-bottom: 6px;
    font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.15rem; color: var(--azul-claro); }
/* variante em COLUNA (por medalha, com a faixa de % de chance em cada linha) */
.kpi__bd--col { flex-direction: column; align-items: flex-start; gap: 3px;
    font-size: .82rem; font-weight: 600; color: var(--cinza); }
.kpi__bd--col b { font-family: var(--fonte-titulo); color: var(--azul-claro); font-size: 1rem; }
.kpi--bd .chip-produto { font-size: .72rem; font-weight: 700; margin: 0; }

/* Checagem de "Serve por vetor" (Paulo 24/07): selo do Serve que não casa produto PH3A */
.serve-suspeito { display: inline-block; background: #fdecea; color: #b23b00;
    border: 1px solid #f5c6b8; border-radius: 8px; padding: 1px 6px; font-size: .72rem;
    font-weight: 700; white-space: nowrap; margin-right: 4px; }
.serve-susp-aviso { color: #b23b00; }
/* veredito da IA (passo b): 🤖 fora de produto (vermelho) · 🤖 é produto (verde) */
.serve-ia-fora { display: inline-block; background: #fdecea; color: #b23b00;
    border: 1px solid #f5c6b8; border-radius: 8px; padding: 1px 6px; font-size: .72rem;
    font-weight: 700; margin-right: 4px; }
.serve-ia-fit { display: inline-block; background: #e7f6ec; color: #1b7a3d;
    border: 1px solid #b6e0c4; border-radius: 8px; padding: 1px 6px; font-size: .72rem;
    font-weight: 700; margin-right: 4px; }

.filtros {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px;
    background: var(--branco); border: 1px solid var(--borda); border-radius: 12px; padding: 12px 16px;
}
.filtros select, .filtros input { padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; font-size: .9rem; }
.filtros__score { font-size: .85rem; color: var(--cinza); display: flex; gap: 6px; align-items: center; }
.filtros__score input { width: 70px; }
.filtros__valor input { width: 96px; }
/* 🏅 filtro por medalha (checkboxes, multi) — pedido Paulo 12/07 */
.filtros__medalhas { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap;
    border: 1px solid var(--borda); border-radius: 8px; padding: 7px 8px; margin: 0; min-width: 0; }
.filtros__medalhas label { display: inline-flex; align-items: center; gap: 3px; font-size: .8rem;
    color: var(--cinza); font-weight: 600; cursor: pointer; white-space: nowrap; }
.filtros__medalhas input { margin: 0; cursor: pointer; }

.btn {
    border: 1px solid var(--borda); background: var(--branco); color: var(--azul);
    padding: 9px 16px; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: .9rem;
    text-decoration: none; display: inline-block;
}
.btn--primario { background: var(--acento); color: #fff; border-color: var(--acento); }
.btn--mini { padding: 5px 10px; font-size: .8rem; }
/* 🧹 Zona de perigo (reset de produção) — Paulo 14/08 */
.adm-card--perigo { border: 1.5px solid #e0b4b4; background: #fdf6f6; }
.btn--perigo { background: #b23c17; color: #fff; }
.btn--perigo:hover { background: #93300f; }
.versao-app { align-self: center; margin-right: 8px; font-size: .72rem; color: #f1f5f9; font-weight: 700;
    background: rgba(255,255,255,.16); padding: 2px 9px; border-radius: 999px; letter-spacing: .3px; white-space: nowrap; }
.fontes-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
.fontes-acoes__lbl { font-weight: 600; color: var(--azul); font-size: .85rem; }
.fontes-acoes__hint { flex-basis: 100%; font-size: .78rem; color: var(--cinza); }
.btn:disabled { opacity: .6; cursor: progress; }

.tabela { width: 100%; border-collapse: collapse; background: var(--branco); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
/* ⚠️ Padding ENXUTO: são 11 colunas — cada 5px a menos de cada lado devolve ~110px de largura pra
   tabela. Foi o que fez a coluna "Serve?" caber sem cortar conteúdo (print do Paulo 16/07). */
.tabela th { text-align: left; padding: 12px 9px; background: #f1f5f9; color: var(--cinza); font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; }
.tabela td { padding: 12px 9px; border-top: 1px solid var(--borda); font-size: .88rem; vertical-align: top; }

/* 📇 Layout em CARTÕES/LISTA (pedido Paulo 12/07): cada linha vira um bloco "rótulo: valor" — sem
   rolagem lateral no celular. Vale pra .tabela e .rel-tab; a escolha (body.layout-cartoes) é do usuário
   (app.js layoutTabelas, lembra em localStorage). O rótulo vem do <thead> (data-rotulo, posto pelo JS). */
.layout-wrap { display: flex; justify-content: flex-end; margin: 0 0 10px; }
#layout-toggle { display: inline-flex; align-items: center; gap: 6px; }
body.layout-cartoes .tabela-wrap { overflow-x: visible; }
body.layout-cartoes .tabela, body.layout-cartoes .rel-tab,
body.layout-cartoes .tabela tbody, body.layout-cartoes .rel-tab tbody { display: block; width: 100%; min-width: 0; box-shadow: none; }
/* ⚠️ o `.tabela { min-width: 720px }` do mobile (p/ rolar lateral no modo TABELA) NÃO pode vazar
   pro cartão, senão o card fica 720px numa tela de ~390px e o texto (objeto/órgão) corta pela
   direita — o `min-width: 0` acima zera isso no modo cartão (pedido Paulo 12/07). */
body.layout-cartoes .tabela thead, body.layout-cartoes .rel-tab thead { display: none; }
body.layout-cartoes .tabela tr, body.layout-cartoes .rel-tab tr {
    display: block; border: 1px solid var(--borda); border-radius: 12px; background: var(--branco);
    margin: 0 0 10px; padding: 8px 12px; box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
/* EMPILHADO (pedido Paulo 12/07): rótulo EM CIMA, conteúdo EMBAIXO em largura TOTAL — em vez de
   "rótulo | valor" lado a lado (que estourava pra direita com chips/texto longo). */
body.layout-cartoes .tabela td, body.layout-cartoes .rel-tab td {
    display: block; padding: 5px 0; border: 0; font-size: .9rem; overflow-wrap: anywhere;
}
body.layout-cartoes .tabela td[data-rotulo]::before, body.layout-cartoes .rel-tab td[data-rotulo]::before {
    content: attr(data-rotulo); display: block; margin-bottom: 2px; color: var(--cinza); font-weight: 700;
    font-size: .66rem; text-transform: uppercase; letter-spacing: .02em;
}
body.layout-cartoes .objeto { max-width: none; }
/* dentro do cartão nada estoura pra direita: chips/containers QUEBRAM, campos no máx. 100% */
body.layout-cartoes td .produtos, body.layout-cartoes td .atribuir__atuais,
body.layout-cartoes td .atribuir__add, body.layout-cartoes td .triagem { display: flex; flex-wrap: wrap; gap: 6px; }
body.layout-cartoes td .chip-produto, body.layout-cartoes td .chip-vend { white-space: normal; }
body.layout-cartoes td select, body.layout-cartoes td input, body.layout-cartoes td a { max-width: 100%; }

/* ── Opção A (pedido Paulo 12/07): cartão "rótulo à ESQUERDA · valor à direita" numa linha só, pra
   usar melhor a tela. Escopado ao RECEBIDAS (rel-tab--linha) por ora — estender aos demais se
   aprovado. Campos LARGOS (objeto/produtos/órgão/triar) voltam a empilhar em largura cheia. ── */
body.layout-cartoes .rel-tab--linha td {
    display: grid; grid-template-columns: minmax(88px, 42%) 1fr; gap: 2px 12px;
    align-items: baseline; padding: 5px 0; text-align: left; overflow-wrap: anywhere;
}
body.layout-cartoes .rel-tab--linha td[data-rotulo]::before { display: block; margin: 0; align-self: baseline; }
body.layout-cartoes .rel-tab--linha td.objeto, body.layout-cartoes .rel-tab--linha td.produtos,
body.layout-cartoes .rel-tab--linha td.orgao, body.layout-cartoes .rel-tab--linha td.triar { display: block; }
body.layout-cartoes .rel-tab--linha td.objeto::before, body.layout-cartoes .rel-tab--linha td.produtos::before,
body.layout-cartoes .rel-tab--linha td.orgao::before, body.layout-cartoes .rel-tab--linha td.triar::before {
    margin-bottom: 3px;
}
/* texto da licitação NUNCA vaza pela direita no mobile (pedido Paulo 12/07) */
body.layout-cartoes .rel-tab--linha td.objeto, body.layout-cartoes .rel-tab--linha td.objeto a {
    overflow-wrap: anywhere;
}
/* o badge de Tipo (L/R/N) é um <span> = item de grid → esticava pra preencher a coluna (parecia
   centralizado/largo); ancora à ESQUERDA. A margem negativa cancela o padding-left da pílula (7px)
   pra a LETRA alinhar com os números (que começam colados na borda) — pedido Paulo 17/07. */
body.layout-cartoes .rel-tab--linha td .fnt-mundo { justify-self: start; margin-left: -7px; }
/* 🔑 resumo "por que casou" abaixo do objeto */
.casou { margin-top: 5px; font-size: .78rem; color: var(--acento); font-weight: 600; line-height: 1.3; }
.objeto { max-width: 360px; color: #334155; }
.valor { white-space: nowrap; font-variant-numeric: tabular-nums; }
.motivo { color: var(--cinza); font-size: .76rem; margin-top: 4px; }

.score { font-weight: 800; padding: 4px 10px; border-radius: 999px; color: #fff; }
.score--alto { background: var(--acento); }
.score--medio { background: var(--gopoints); }
.score--baixo { background: var(--cinza); }
.medalha { font-size: 1.05rem; margin-right: 2px; vertical-align: middle; }
.medalha__lbl { font-size: .72rem; font-weight: 700; color: var(--cinza); margin-right: 6px; vertical-align: middle; }
/* mantém 🥇 Ouro 100 na MESMA linha (não empilha o rótulo em cima da pontuação) */
.cel-score { white-space: nowrap; }

.tag { font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 6px; color: #fff; margin-right: 6px; }
/* Empresa: tag PH3A/Gopoints centralizada EM CIMA do selo Governo/Privado */
.cel-empresa { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.cel-empresa .tag { margin-right: 0; }
.tag--ph3a { background: var(--ph3a); }
.tag--gopoints { background: var(--gopoints); }

/* Produto(s) que a oportunidade oferece (coluna do painel) */
.produtos { white-space: normal; }
.chip-produto {
    /* raio moderado (não pílula cheia): nome longo quebra em 2+ linhas sem o texto vazar do
       arredondado (pedido Paulo 12/07 — "LGPD / Segurança da Informação · 27" ficava fora do círculo). */
    display: inline-block; background: #eef2ff; color: var(--azul);
    border: 1px solid #dbe2ff; border-radius: 10px; line-height: 1.35;
    padding: 3px 9px; margin: 0 4px 4px 0; font-size: .72rem; font-weight: 700;
}
.produtos__vazio { color: var(--cinza); }

/* Selo do tipo de CLIENTE da oportunidade — Governo (navy) x Privado (laranja) */
.chip-cliente {
    display: inline-block; border-radius: 999px; padding: 2px 9px;
    margin: 4px 0 2px; font-size: .68rem; font-weight: 700; color: #fff;
}
.chip-cliente--governo { background: var(--azul); }
.chip-cliente--privado { background: var(--acento); }

/* 🗂️ Tudo (Paulo 24/08) — selo do ASSUNTO na tela unificada (Licitação/RFP/Norma) + filtro por assunto */
.chip-assunto {
    display: inline-block; border-radius: 8px; padding: 3px 8px; white-space: nowrap;
    font-size: .68rem; font-weight: 800; color: #fff;
}
.chip-assunto--licitacao { background: var(--azul); }
.chip-assunto--rfp { background: var(--acento); }
.chip-assunto--norma { background: #6b46c1; }  /* roxo = legislação */
.tudo-filtros { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 12px; }
.tudo-filtros label { display: inline-flex; align-items: center; gap: 5px; font-size: .85rem;
    font-weight: 700; color: var(--texto); cursor: pointer; }
.tudo-vazio { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px;
    padding: 16px 18px; margin: 16px 0; color: #166534; font-size: .95rem; }
.tudo-transf { margin-top: 6px; }
.tudo-datas { color: var(--cinza); font-size: .72rem; white-space: nowrap; }

/* Encaminhar licitação a vendedor (detalhe) + produtos do vendedor (admin) */
.atribuir__atuais { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
/* ⚠️ A célula "Encaminhar" tem TETO: sem ele o chip do vendedor (191px com data+hora) + o select
   somavam 324px e empurravam a coluna "Serve?" pra fora da tela (print do Paulo 16/07). Com teto, o
   select e o Enviar quebram entre si e o objeto fica com o espaço que sobra. */
.tabela td.atribuir { max-width: 190px; }
.atribuir__add { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* o select de encaminhar não alarga a coluna (era 324px) — 16px na fonte é anti-zoom do iOS, mas
   a LARGURA agora é limitada; no celular ele volta a ocupar a linha inteira (media query abaixo). */
.atribuir__add select {
    padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; font-size: 16px;
    max-width: 100%; min-width: 0; flex: 1 1 110px;
}
/* O OBJETO é o que o vendedor lê — ele fica com o espaço que sobra em vez de quebrar palavra a
   palavra (medido: 199px enquanto os botões levavam 644px). */
.tabela td.objeto, .tabela th.objeto { min-width: 260px; }
/* Coluna de ações (detalhe/abrir): na visão admin a tabela tem a coluna extra "Encaminhado pra",
   e os 2 botões LADO A LADO vazavam ~um botão pela direita (print do Paulo 16/07). Empilhados, a
   coluna encolhe pra a largura de UM botão — sem perder função. ⚠️ o `detalhe` aponta pro MESMO
   URL que o link do objeto (linha 174 do painel.html): é atalho, não info nova. */
.tabela td.col-acoes { white-space: nowrap; }
.tabela td.col-acoes .btn--mini { display: block; text-align: center; }
.tabela td.col-acoes .btn--mini + .btn--mini { margin-top: 5px; }
/* "FAZER CABER" (escolha do Paulo 16/07): a tabela do painel (11 colunas na visão admin) ENCOLHE pra
   caber na tela SEM rolagem lateral. Tightening ESCOPADO só nela (`.tabela--painel`) — as outras
   `.tabela` (restritivos etc.) seguem folgadas. O objeto quebra em mais linhas em troca de não rolar de
   lado. ⚠️ Em tela MENOR que a do Paulo o `.tabela-wrap` (overflow-x:auto) ainda rola — a saída aí é o
   ▤ Ver em lista (cartões, zero rolagem). */
.tabela--painel th, .tabela--painel td { padding: 12px 6px; }
.tabela--painel td.objeto, .tabela--painel th.objeto { min-width: 200px; }
.tabela--painel td.atribuir { max-width: 155px; }
.chip-vend {
    /* ⚠️ flex-wrap + max-width: sem eles, nome + data + badge "aceitou" + ✕ eram forçados numa
       linha só e VAZAVAM da célula (247px numa de 190) — o excedente aparecia emaranhado ao lado
       da coluna Serve? (print do Paulo 16/07, radar de normas). Agora quebra dentro do chip. */
    display: inline-flex; align-items: center; flex-wrap: wrap; gap: 3px 6px; max-width: 100%;
    background: var(--azul); color: #fff;
    border-radius: 14px; padding: 4px 10px; font-size: .78rem; font-weight: 700;
}
.chip-vend > * { min-width: 0; }
/* o NOME encolhe com … em vez de empurrar o resto pra fora */
.chip-vend__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.chip-vend__x { background: none; border: 0; color: #fff; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; }
.chip-vend__dt { font-size: .62rem; font-weight: 600; opacity: .85; white-space: nowrap; }
/* Indicador (pro admin) do que o vendedor triou no item: ✅ aceitou / 🚫 recusou */
.chip-tri { font-size: .62rem; font-weight: 800; border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.chip-tri--ok { background: #e8f7ec; color: #1b5e20; }
.chip-tri--no { background: #fdecea; color: #b71c1c; }
.dist__receb { display: block; color: var(--cinza); font-size: .72rem; margin-top: 2px; }
.us-prod { margin-top: 8px; }
.us-prod summary { cursor: pointer; font-weight: 600; font-size: .85rem; color: var(--azul); }
.us-prod__lista { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0; }
/* Especialização POR CATEGORIA (Paulo 11/08): categoria-mãe (gate) + produtos embaixo */
.us-cat__ajuda { margin: 6px 0; }
.us-cats { display: flex; flex-direction: column; gap: 8px; margin: 6px 0; }
.us-cat { border: 1px solid var(--borda); border-radius: 8px; padding: 8px 10px; }
.us-cat__mae { display: block; margin-bottom: 6px; }
.us-cat__mae strong { color: var(--azul); }
.us-cat__prod { display: flex; flex-wrap: wrap; gap: 4px 14px; padding-left: 18px; }
.us-cat__prod input:disabled + span, .us-prod-cb:disabled { opacity: .45; }
.us-prod__op { font-weight: 500; font-size: .82rem; display: inline-flex; align-items: center; gap: 5px; }
.atribuir--norma .atribuir__add { flex-direction: column; align-items: stretch; gap: 5px; }
.atribuir--norma select { font-size: .8rem; padding: 5px 7px; }
.atribuir--norma .chip-vend { font-size: .72rem; }

/* ── Tela central de Distribuição ────────────────────────────────── */
.dist__abas, .dist__subabas { display: flex; gap: 6px; margin-bottom: 14px; }
.dist__aba, .dist__subaba {
    border: 1px solid var(--borda); background: var(--branco); color: var(--cinza);
    padding: 8px 16px; border-radius: 999px; cursor: pointer; font-weight: 700; font-size: .85rem;
}
.dist__aba--ativa, .dist__subaba--ativa { background: var(--azul); color: #fff; border-color: var(--azul); }
.dist__controles { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.dist__controles select, .dist__controles input, .dist__incluir input, .dist__card-sel {
    padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; font-size: 16px;
}
.dist__incluir { display: flex; gap: 8px; margin: 6px 0; flex-wrap: wrap; }
.dist__incluir input { flex: 1; min-width: 220px; }
.dist__prods { color: var(--cinza); font-size: .9rem; }
.dist__cont { background: var(--fundo); border-radius: 999px; padding: 1px 9px; font-size: .8rem; color: var(--cinza); }
.dist__lista { list-style: none; padding: 0; margin: 6px 0 18px; }
.dist__lista--result { border-left: 3px solid var(--acento); padding-left: 10px; }
.dist__li { display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 8px 4px; border-bottom: 1px solid var(--borda); }
.dist__rot { font-size: .88rem; }
.dist__rot small { display: block; color: var(--cinza); font-size: .76rem; }
.dist__acoes { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.dist__itens { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.dist__card { border: 1px solid var(--borda); border-radius: 10px; padding: 12px; background: var(--branco); }
.dist__card-top { display: flex; justify-content: space-between; gap: 8px; }
.dist__card-prods { margin: 8px 0 6px; }
.dist__card-resp { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; margin-bottom: 8px; }
.dist__card-add { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dist__card-sel { font-size: .8rem; padding: 5px 7px; }

.status-sel { padding: 5px 8px; border: 1px solid var(--borda); border-radius: 6px; font-size: .82rem; }
.vazio { background: var(--branco); border: 1px dashed var(--borda); border-radius: 12px; padding: 40px; text-align: center; color: var(--cinza); }

/* ── Tela de palavras-chave ─────────────────────────────────────── */
.ajuda { color: var(--cinza); font-size: .9rem; margin: 0 0 18px; }
.kw-empresa { background: var(--branco); border: 1px solid var(--borda); border-radius: 12px; padding: 18px 20px; margin-bottom: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.kw-empresa__cab { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.kw-empresa__cab small { color: var(--cinza); }
.kw-empresa__contagem { margin-left: auto; color: var(--azul-claro); font-weight: 700; font-size: .85rem; }
.kw-add { display: flex; gap: 8px; margin-bottom: 12px; }
.kw-add__input { flex: 1; padding: 9px 12px; border: 1px solid var(--borda); border-radius: 8px; font-size: .9rem; }
.kw-lista { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.kw-item { display: flex; align-items: center; gap: 8px; background: #f8fafc; border: 1px solid var(--borda); border-radius: 8px; padding: 6px 10px; }
.kw-item--off { opacity: .5; }
.kw-item__chk { display: flex; }
.kw-chk { width: 18px; height: 18px; cursor: pointer; }
.kw-item__termo { flex: 1; border: none; background: transparent; font-size: .9rem; color: var(--azul); padding: 4px; }
.kw-item__termo:focus { outline: 1px solid var(--acento); border-radius: 4px; background: #fff; }
.kw-item__vetor { display: flex; align-items: center; gap: 4px; font-size: .75rem; color: var(--cinza); white-space: nowrap; cursor: pointer; -webkit-user-select: none; user-select: none; }
.kw-item__vetor input { width: 15px; height: 15px; cursor: pointer; }
.kw-item--vetor-off .kw-item__vetor { color: #cbd5e1; }
.kw-item__del { border: none; background: transparent; color: #cbd5e1; cursor: pointer; font-size: 1rem; }
.kw-item__del:hover { color: #ef4444; }
.kw-vazio { color: var(--cinza); font-size: .85rem; }

/* Grupos & Empresas */
.grp-add, .emp-add { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.grp-add__input { flex: 1; min-width: 220px; padding: 9px 12px; border: 1px solid var(--borda); border-radius: 8px; font-size: .9rem; }
.emp-add--livre { margin-top: 18px; }
.grp { background: var(--branco); border: 1px solid var(--borda); border-radius: 12px; padding: 16px 18px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.grp__cab { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--borda); padding-bottom: 10px; flex-wrap: wrap; }
/* min-width:0 deixa o input do nome ENCOLHER no flex — senão a largura intrínseca dele empurra o
   "N empresa(s)" e o ✕ pra fora da tela no celular (pedido Paulo 12/07). */
.grp__nome { flex: 1; min-width: 0; border: none; background: transparent; font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.05rem; color: var(--azul); padding: 4px; }
.grp__nome:focus { outline: 1px solid var(--acento); border-radius: 4px; background: #fff; }
.grp__nome--livre { color: var(--cinza); }
.grp__contagem { color: var(--azul-claro); font-weight: 700; font-size: .82rem; }
.grp__del, .emp-item__del { border: none; background: transparent; color: #cbd5e1; cursor: pointer; font-size: 1rem; }
.grp__del:hover, .emp-item__del:hover { color: #ef4444; }
.emp-add__nome, .emp-add__foco { padding: 8px 11px; border: 1px solid var(--borda); border-radius: 8px; font-size: .88rem; }
.emp-add__nome { flex: 2; min-width: 180px; } .emp-add__foco { flex: 1; min-width: 120px; }
.emp-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.emp-item { display: flex; align-items: center; gap: 8px; background: #f8fafc; border: 1px solid var(--borda); border-radius: 8px; padding: 6px 10px; flex-wrap: wrap; }
.emp-item__nome { flex: 1.4; min-width: 120px; border: none; background: transparent; font-weight: 600; font-size: .9rem; color: var(--azul); padding: 4px; }
.emp-item__foco { flex: 1; min-width: 90px; border: none; background: transparent; font-size: .85rem; color: var(--cinza); padding: 4px; }
.emp-item__nome:focus, .emp-item__foco:focus { outline: 1px solid var(--acento); border-radius: 4px; background: #fff; }
.emp-grp { font-size: .78rem; padding: 4px 6px; border: 1px solid var(--borda); border-radius: 6px; background: #fff; color: var(--azul); }
.emp-item__kw { text-decoration: none; white-space: nowrap; }

/* Admin */
/* 🚦 Farol de saúde */
.farol-luz { display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: #cbd5e1; vertical-align: middle; box-shadow: 0 0 0 2px rgba(0,0,0,.06) inset; }
.farol-luz--verde { background: #16a34a; box-shadow: 0 0 8px #16a34a99; }
.farol-luz--amarelo { background: #f59e0b; box-shadow: 0 0 8px #f59e0b99; }
.farol-luz--vermelho { background: #dc2626; box-shadow: 0 0 8px #dc262699; }
.modal-box--largo { max-width: 640px; }
.farol-itens { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; text-align: left; }
.farol-item { padding: 8px 12px; border-radius: 8px; font-size: .9rem; border: 1px solid var(--borda); background: var(--branco); }
.farol-item--ok { border-left: 4px solid #16a34a; }
.farol-item--aviso { border-left: 4px solid #f59e0b; background: #fffbeb; }
.farol-item--erro { border-left: 4px solid #dc2626; background: #fef2f2; }
.adm-login { max-width: 440px; margin: 30px auto; background: var(--branco); border: 1px solid var(--borda); border-radius: 12px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.adm-titulo { font-family: var(--fonte-titulo); color: var(--azul); margin: 0 0 6px; }
.adm-form { display: grid; gap: 10px; margin-top: 12px; }
.adm-form input { padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px; font-size: 16px; }
.adm-erro { color: #ef4444; font-size: .85rem; min-height: 1em; }
.adm-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.adm-cab .adm-titulo { margin: 0; }
.adm-env { color: var(--cinza); font-size: .82rem; }
.adm-cab .btn--mini { margin-left: auto; }
.adm-card { background: var(--branco); border: 1px solid var(--borda); border-radius: 12px; padding: 18px 20px; margin-bottom: 16px; }
.adm-card h3 { font-family: var(--fonte-titulo); color: var(--azul); margin: 0 0 6px; font-size: 1rem; }
.adm-card--soon { opacity: .8; }
.adm-card--soon ul { margin: 8px 0 0; padding-left: 20px; color: var(--cinza); line-height: 1.7; }
.adm-pre { background: #0b1f44; color: #cfe0ff; border-radius: 8px; padding: 12px; overflow: auto; font-size: .8rem; max-height: 320px; }
.adm-status { font-size: .88rem; color: var(--azul); margin: 8px 0; }
.adm-botoes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
/* Bloco IA Principal (Claude) + Secundária (OpenAI) no card 📨 Canais (pedido Paulo 18/07). */
.cn-ia-bloco { border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; margin: 6px 0; background: #fbfcfe; display: flex; flex-direction: column; gap: 7px; }
.cn-ia-titulo { color: var(--azul); font-size: .92rem; }
.cn-ia-ajuda { font-size: .8rem; color: var(--cinza); margin: 0; }
.cn-ia-rot { font-size: .82rem; font-weight: 600; color: var(--primaria); margin-top: 4px; }
/* Forms dos cards do admin (Contratante, Ariba, Canais…): 2 colunas LARGAS que ocupam a largura do
   card em vez de os inputs saírem no tamanho do texto (pedido Paulo 16/07: "aumentar os campos e-mail
   e senha do Ariba, sobra espaço à direita"). O `min-width:0` deixa cada célula ocupar o 1fr real. */
.ct-form, .ar-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; align-items: start; }
.ar-form input { padding: 9px 11px; border: 1px solid var(--borda); border-radius: 8px; font-size: 16px; min-width: 0; width: 100%; }
.ar-form .pr-chk, .ar-form .adm-botoes { grid-column: 1 / -1; }
.ct-form input { padding: 9px 11px; border: 1px solid var(--borda); border-radius: 8px; font-size: 16px; min-width: 0; }
.ct-form .btn { grid-column: 1 / -1; }
.ct-acoes { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; flex-wrap: wrap; }
.ct-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ct-item { background: #f8fafc; border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; }
.ct-item__cab { display: flex; align-items: baseline; gap: 8px; justify-content: space-between; }
.ct-cnpj { color: var(--cinza); font-size: .82rem; font-variant-numeric: tabular-nums; }
.ct-item__meta { color: var(--azul); font-size: .85rem; margin: 4px 0 8px; }
.ct-selo { font-weight: 600; }
@media (max-width: 820px) { .ct-form, .ar-form { grid-template-columns: 1fr; } }

/* Inteligência de preços (feature E) */
.precos-faixa { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.precos-card { flex: 1 1 90px; background: #f8fafc; border: 1px solid var(--borda); border-radius: 10px;
  padding: 10px 12px; text-align: center; }
.precos-card--mediana { background: #eef4ff; border-color: var(--azul); }
.precos-card__n { display: block; font-weight: 700; font-size: 1rem; color: var(--azul); font-variant-numeric: tabular-nums; }
.precos-card__l { display: block; font-size: .76rem; color: var(--cinza); margin-top: 2px; }

/* 🔎 Fila filtrada por vendedor (Paulo 21/07) — banner do drill dos números */
.fila-filtro { background: #fff7f3; border: 1px solid var(--acento); border-radius: 8px;
  padding: 8px 12px; margin: 10px 0; }

/* ⚔️ Apoio à disputa (Paulo 20/07) — alerta de sessão + preço-alvo + checklist */
.apoio-disputa { border-left: 4px solid var(--azul); }
.apoio-disputa--iminente { border-left-color: var(--acento); background: #fff7f3; }
.apoio-linha { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 8px 0; }
.apoio-rot { font-weight: 700; color: var(--azul); }
.apoio-val { font-variant-numeric: tabular-nums; }
.apoio-badge { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px;
  background: var(--acento); color: #fff; font-size: .8rem; font-weight: 700; }
.apoio-badge--fim { background: var(--cinza); }
.apoio-preco { margin: 10px 0; padding: 10px 12px; background: #f8fafc; border: 1px solid var(--borda);
  border-radius: 10px; }
.apoio-preco p { margin: .35rem 0; }
.apoio-checklist { margin-top: 10px; }
.apoio-checklist summary { cursor: pointer; font-weight: 600; color: var(--azul); }
.apoio-checklist ul { margin: .5rem 0 .2rem 1.1rem; color: var(--cinza); }
.apoio-checklist li { margin: .2rem 0; }
.precos-posicao { font-weight: 600; border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
.precos-posicao--alto { background: #fdecea; color: #b71c1c; }
.precos-posicao--baixo { background: #e8f7ec; color: #1b5e20; }
.precos-hist { margin: 10px 0; }
.precos-bar-row { display: grid; grid-template-columns: 110px 1fr 32px; align-items: center; gap: 8px; margin: 3px 0; font-size: .82rem; }
.precos-bar-lbl { color: var(--cinza); text-align: right; white-space: nowrap; }
.precos-bar { background: #eef1f5; border-radius: 6px; height: 16px; overflow: hidden; }
.precos-bar__fill { display: block; height: 100%; background: var(--azul); border-radius: 6px; min-width: 2px; }
.precos-bar-n { font-variant-numeric: tabular-nums; color: var(--cinza); }
.precos-bar-row--este .precos-bar-lbl { color: var(--acento); font-weight: 700; }
.precos-bar-row--este .precos-bar__fill { background: var(--acento); }
.precos-quebras { display: flex; gap: 18px; flex-wrap: wrap; font-size: .88rem; margin: 6px 0; }
.precos-exemplos { margin-top: 8px; font-size: .88rem; }
.precos-exemplos ul { margin: 6px 0 0; padding-left: 18px; }

/* Triagem: serve (✅) / não serve (🚫) → Restritivos */
/* ⚠️ Os 3 botões (Serve/Não serve/Parceiro) QUEBRAM em 2 linhas quando precisam — o `nowrap`
   forçava 320px numa coluna só e empurrava a última coluna PRA FORA da tela (medido: tabela 1902px
   numa área de 1550 → a coluna "Serve?" ficava cortada; print do Paulo 16/07). Em tela larga eles
   continuam lado a lado; no aperto, descem. */
.triagem { display: flex; flex-wrap: wrap; gap: 4px; }
/* 📨 Recebidas: os 3 botões (✅🚫🤝) SEMPRE na mesma linha, sem quebrar pra baixo (Paulo 22/08) —
   mesmo quando o órgão é longo e espreme a coluna. O 📣 força-de-venda (irmão) segue embaixo. */
td.triar { white-space: nowrap; }
.rec-triagem { display: inline-flex; flex-wrap: nowrap; gap: 4px; vertical-align: middle; }
.tri-btn { border: 1.5px solid var(--borda); background: #fff; border-radius: 8px; padding: 5px 9px;
  cursor: pointer; font-size: .8rem; font-weight: 700; line-height: 1; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s; }
.tri-aceita { color: #2e7d32; border-color: #bfe3c7; }
.tri-aceita:hover { background: #e8f7ec; border-color: #2e7d32; }
.tri-aceita.is-on { background: #2e7d32; color: #fff; border-color: #2e7d32; }
.tri-nao { color: #c62828; border-color: #f1c7c3; }
.tri-nao:hover { background: #fdecea; border-color: #c62828; }
.tri-nao.is-on { background: #c62828; color: #fff; border-color: #c62828; }
.tri-parceiro { color: #6a1b9a; border-color: #d9c2e8; }  /* encaminhado a parceiro (Paulo 10/07) */
.tri-parceiro:hover { background: #f5edfa; border-color: #6a1b9a; }
.tri-parceiro.is-on { background: #6a1b9a; color: #fff; border-color: #6a1b9a; }
.tri-legenda { font-size: .85rem; color: var(--cinza); margin: 6px 0 12px;
  background: #f8fafc; border: 1px solid var(--borda); border-radius: 8px; padding: 8px 12px; }
.tri-legenda .tri-leg { white-space: nowrap; }
/* ⚠️ No celular o `nowrap` da legenda estourava a tela (medido: 385px numa de 375) — e como o
   layout viewport cresce junto, a .tabbar FIXA (left/right:0) crescia atrás dele e o último ícone
   saía da tela. A causa é aqui, não na tabbar. Em tela estreita a legenda pode quebrar. */
@media (max-width: 400px) {
    .tri-legenda .tri-leg { white-space: normal; }
}

/* Aviso "Populando normas…" (enquanto reclassifica as relevâncias) */
.aviso-populando {
  background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412;
  border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; font-size: .92rem;
}

/* Produtos PH3A (descrição → IA gera keywords) */
.pr-form { display: grid; gap: 8px; margin: 10px 0; }
.pr-form input[type="text"], .pr-form textarea, .pr-form select {
  padding: 9px 11px; border: 1px solid var(--borda); border-radius: 8px; font-size: 15px;
  font-family: inherit; width: 100%; box-sizing: border-box;
}
.pr-kw-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pr-form__lin { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pr-form__lin select { flex: 1; min-width: 200px; }
.pr-chk { font-size: .85rem; display: inline-flex; align-items: center; gap: 6px; }
/* Formulário "adicionar área" dos Eventos em LINHA (não empilhado) — Paulo 19/08 */
.ev-nova-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.ev-nova-form select, .ev-nova-form input[type="text"] {
  padding: 9px 11px; border: 1px solid var(--borda); border-radius: 8px; font-size: 15px;
  font-family: inherit; box-sizing: border-box;
}
.ev-nova-form select { min-width: 180px; }
.ev-nova-form input[type="text"] { flex: 1 1 200px; }

/* ── Badges de fonte ─────────────────────────────────────────────── */
.badge { font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.badge--ok { background: color-mix(in srgb, var(--acento) 16%, transparent); color: var(--acento); }
.badge--pend { background: #eef0f3; color: var(--cinza); }

/* ── PWA / responsivo (iOS + Android) — base pro app futuro ──────── */
.tabela-wrap { width: 100%; overflow-x: auto; border-radius: 12px; }
.topo { padding-top: calc(16px + env(safe-area-inset-top)); }

@media (max-width: 820px) {
    .topo { padding: calc(12px + env(safe-area-inset-top)) 16px 12px; gap: 10px; }
    .topo__marca { font-size: 1.25rem; }
    .topo__sub { display: none; }                 /* libera espaço no mobile */
    .topo__nav { order: 3; width: 100%; gap: 4px; }
    .topo__nav a { padding: 6px 10px; font-size: .85rem; }
    .conteudo { margin: 14px auto; padding: 0 12px; }
    .captura-barra { padding: 10px 16px; }
    .kpis { gap: 10px; }
    .kpi { flex: 1 1 30%; min-width: 0; padding: 12px 14px; }
    .kpi__num { font-size: 1.5rem; }
    .filtros { gap: 8px; padding: 10px 12px; }
    .filtros select, .filtros input { font-size: 16px; }   /* ≥16px evita zoom no iOS */
    .tabela { min-width: 720px; }                 /* mantém colunas, rola lateralmente */
    .objeto { max-width: 260px; white-space: normal; }
    .kw-add { flex-wrap: wrap; }
    .kw-add__input { min-width: 60%; }
    .kw-lista { grid-template-columns: 1fr; }
    .kw-item__termo, .fonte-nome, .fonte-url { font-size: 16px; }   /* anti-zoom iOS */
    .btn { padding: 9px 14px; }
    /* ⬇ CSV + ⟳ Capturar mais enxutos no celular pra CABEREM na linha da marca RFP_Licit (Paulo 11/07) */
    .topo__acoes .btn { padding: 6px 9px; font-size: .8rem; }
    .topo__acoes { gap: 6px; }
}

/* ── Barra INFERIOR de navegação (celular: navegador OU app instalado) — pedido Paulo 09/07 ──
   Espelha o padrão aprovado do CRM. Aparece em TODO celular (≤820px); no desktop nada muda.
   O menu completo abre pelo ☰ (#menu-btn) do canto superior esquerdo, como GAVETA pela esquerda. */
.tabbar { display: none; }
.topo__menu { display: none; }   /* ☰ do topo: só no celular (regra abaixo) */
@media (max-width: 820px) {
    body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
    .topo__menu {
        display: inline-flex; align-items: center; justify-content: center; order: -1;
        background: transparent; border: 0; color: #fff; font-size: 1.55rem; line-height: 1;
        padding: 0 8px 0 0; margin: 0; cursor: pointer;
        touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    }
    .topo__menu:active { opacity: .6; }
    .tabbar {
        display: flex; align-items: stretch; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9002;
        background: var(--azul); border-top: 1px solid rgba(255,255,255,.14);
        padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
        box-shadow: 0 -2px 12px rgba(0,0,0,.18);
        /* iOS Safari bugga position:fixed em contexto com scroll — a camada GPU própria resolve.
           ⚠️ NÃO usar `will-change: transform` aqui: ele FIXA a camada e, quando o teclado do iOS
           abre (ex.: modal de encaminhar ao parceiro pede e-mail), a barra é recalculada pra cima
           e fica PRESA no meio da tela ao fechar. `translateZ(0)` sozinho promove pra camada sem
           pinar a posição. (pedido Paulo 11/07 — print da tabbar no meio da tela) */
        transform: translateZ(0); backface-visibility: hidden;
    }
    /* Enquanto um MODAL ou a GAVETA está aberto (teclado do iOS pode subir), a tabbar fixa some —
       assim o iOS não pina a camada na posição errada e ela volta certa no rodapé ao fechar. */
    body.modal-aberto .tabbar, body.mais-aberto .tabbar,
    body.modal-aberto #pwa-instalar { display: none; }
    .tabbar__item {
        /* ⚠️ `min-width: 0` é OBRIGATÓRIO: sem ele o item flex NÃO encolhe abaixo do conteúdo
           (min-width:auto) e, com 7 ícones (admin), a barra passava de 401px numa tela de 390 →
           o 🛠️ Admin ficava CORTADO e a página rolava pro lado. Mesma lição do cartão do painel
           e do /empresas (Paulo 12/07). Medido com Playwright a 390/375px. */
        flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center;
        justify-content: center;
        gap: 3px; padding: 6px 2px; min-height: 52px; background: transparent; border: 0;
        text-decoration: none; color: #cbd5e1; font-family: inherit; font-size: 10.5px; font-weight: 600;
        cursor: pointer; border-radius: 10px; position: relative;  /* p/ a barra ativa (::before) */
        touch-action: manipulation; -webkit-tap-highlight-color: transparent;  /* mata o delay de 300ms */
    }
    .tabbar__ico { font-size: 20px; line-height: 1; }
    /* Telas estreitas (iPhone SE/mini, ≤400px): com 7 ícones (admin) o rótulo não cabe em 10,5px —
       aperta fonte/padding em vez de cortar com "…". Medido com Playwright a 375 e 390px. */
    @media (max-width: 400px) {
        .tabbar__item { font-size: 9px; padding: 6px 1px; gap: 2px; letter-spacing: -.2px; }
        .tabbar__ico { font-size: 18px; }
    }
    /* o rótulo nunca alarga o item (7 ícones cabem em 390px): encolhe e corta com … se precisar */
    .tabbar__item span:last-child {
        line-height: 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .tabbar__item:active { color: #fff; background: rgba(255,255,255,.12); transform: scale(.96); }
    /* item ATIVO bem visível (pedido Paulo 12/07 — "marcar no rodapé em qual ícone clicou", vale em
       TODA tela): barra laranja no topo + texto branco + fundo suave + ícone maior. */
    .tabbar__item.is-ativo { color: #fff; background: rgba(255,255,255,.10); }
    .tabbar__item.is-ativo::before {
        content: ""; position: absolute; top: 0; left: 18%; right: 18%; height: 3px;
        background: var(--acento); border-radius: 0 0 3px 3px;
    }
    .tabbar__item.is-ativo .tabbar__ico { transform: scale(1.12); }
    /* bottom-sheet do 📖 Manual do rodapé: Manual + Aprender Rápido dentro do ícone (Paulo 13/07) */
    .folha { position: fixed; inset: 0; z-index: 9015; display: flex; align-items: flex-end; }
    .folha[hidden] { display: none; }
    .folha__bg { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
    .folha__cartao {
        position: relative; width: 100%; margin: 0 10px calc(64px + env(safe-area-inset-bottom));
        background: var(--branco); border: 1px solid var(--borda); border-radius: 16px;
        box-shadow: 0 14px 44px rgba(0,0,0,.32); overflow: hidden; animation: folhaSobe .18s ease;
    }
    .folha__cartao a {
        display: flex; align-items: center; gap: 12px; padding: 16px 18px; text-decoration: none;
        color: var(--texto); font-size: 1.05rem; font-weight: 600; border-bottom: 1px solid var(--borda);
    }
    .folha__cartao a:last-child { border-bottom: 0; }
    .folha__cartao a:active { background: #f2f4f8; }
    @keyframes folhaSobe { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

    /* O menu do topo some no celular — a barra inferior + o ☰ do topo o substituem. */
    .topo__nav, .topo__abas { display: none; }
    /* 🐛 iOS: o header `position: sticky` é ANCESTRAL da gaveta `position: fixed` → o Safari captura o
       toque na FAIXA DE CIMA (onde a barra do header está) e os itens do topo da gaveta (Admin ▾, Painel
       do Admin, Usuários, Meu perfil) não clicavam. Ao abrir a gaveta, tiramos o sticky do header
       (relative SEM z-index → sem stacking context → o drawer fixed sobe de fato pro topo) e a barra do
       header (☰/versão/marca/ações) deixa de interceptar. (pedido Paulo 11/07)
       ⚠️ o sticky agora vive no `.topo-fixo` (header + banner de simulação) → é ELE que vira relative
       ao abrir a gaveta (16/07). */
    body.mais-aberto .topo-fixo { position: relative; z-index: auto; }
    body.mais-aberto .topo__canto,
    body.mais-aberto .topo__marca,
    body.mais-aberto .topo__acoes { pointer-events: none; }
    /* ☰ (topo-esquerdo): reaproveita o .topo__nav como GAVETA pela ESQUERDA (sem duplicar links). */
    body.mais-aberto .topo__nav {
        /* flex-wrap: NOWRAP é essencial: o .topo__nav base é `flex-wrap: wrap` (desktop quebra em 2
           linhas); numa COLUNA de altura definida (bottom:0) o wrap partia o menu em VÁRIAS COLUNAS no
           meio da tela em vez de rolar. nowrap → 1 coluna só + overflow-y rola. (pedido Paulo 11/07) */
        display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch;
        position: fixed; top: 0; left: 0; bottom: 0; width: min(80vw, 320px);
        overflow-y: auto; z-index: 9011; gap: 3px; padding: 14px 10px;
        padding-top: env(safe-area-inset-top);   /* a marca sticky (abaixo) provê o topo */
        background: var(--azul); box-shadow: 4px 0 28px rgba(0,0,0,.5);
    }
    body.mais-aberto .topo__nav > * { flex-shrink: 0; }  /* não espremer os itens → rola em vez de quebrar */
    /* Logo da empresa (whitelabel) FIXO no topo da gaveta — não rola junto (pedido Paulo 12/07). */
    body.mais-aberto .drawer-marca {
        display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 2;
        margin: 0 -10px 8px; padding: 12px 14px; background: var(--azul);
        border-bottom: 1px solid rgba(255,255,255,.16);
        font-family: var(--fonte-titulo); font-size: 1.3rem; font-weight: 800; color: #fff;
    }
    body.mais-aberto .topo__nav a,
    body.mais-aberto .topo__nav .ver-como {
        width: 100%; padding: 12px 14px; font-size: 1rem; border-radius: 8px;
    }
    /* Na GAVETA o dropdown "🛠️ Admin" já está ABERTO (os filhos aparecem) → o resumo NÃO fica laranja
       mesmo sendo a página atual; só o FILHO (a página, ex.: Painel do Admin) destaca — senão parecem
       DOIS itens acesos (pedido Paulo 12/07). No desktop (dropdown fechado) o resumo segue laranja. */
    body.mais-aberto .nav-gestao[open] > summary,
    body.mais-aberto .nav-gestao[open] > summary.is-ativo { background: transparent; color: #cbd5e1; }
    body.mais-aberto .topo__nav .ver-como { background: transparent; color: #cbd5e1; }
    body.mais-aberto::after {   /* backdrop escuro cobre tudo (inclusive a tabbar) */
        content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 9010;
    }
}

/* ── Tela ⚙️ Configurações (parâmetros agrupados) ────────────────── */
.cfg-grupo { font-family: var(--fonte-titulo); font-size: 1.3rem; color: var(--primaria);
    margin: 34px 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--borda); }
.cfg-grupo:first-of-type { margin-top: 10px; }
.cfg-card { background: var(--branco); border: 1px solid var(--borda); border-radius: 12px; padding: 18px 20px; box-shadow: 0 1px 3px rgba(0,0,0,.04); display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.cfg-campo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cfg-campo label { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.cfg-campo input { width: 80px; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; font-size: 16px; }
.cfg-campo small { color: var(--cinza); }
/* Mini barra de progresso AO LADO do botão (re-pontuar) — a global fica no topo, fora da tela. */
.cfg-prog { display: inline-flex; align-items: center; gap: 8px; }
.cfg-prog__trilho { width: 200px; height: 12px; background: var(--borda); border-radius: 6px; overflow: hidden; }
/* ⚠️ display:block é OBRIGATÓRIO: o fill é <span> (inline ignora width/height → nascia 0×0 = SEM COR).
   min-width dá um pedacinho de cor visível já no começo (a % sobe ~0,6%/item numa tarefa longa). */
.cfg-prog__fill { display: block; height: 100%; width: 0; min-width: 10px; background: var(--acento);
    transition: width .3s;
    background-image: linear-gradient(45deg, rgba(255,255,255,.30) 25%, transparent 25%, transparent 50%,
        rgba(255,255,255,.30) 50%, rgba(255,255,255,.30) 75%, transparent 75%, transparent);
    background-size: 24px 24px; animation: progAndando .7s linear infinite; }
/* a listra ANDA sempre → mesmo numa tarefa longa (a barra sobe ~1%/item) o usuário VÊ que está viva */
@keyframes progAndando { from { background-position: 0 0; } to { background-position: 24px 0; } }
@media (prefers-reduced-motion: reduce) { .cfg-prog__fill, .captura-barra__fill { animation: none; } }
.cfg-prog__txt { color: var(--cinza); font-size: .82rem; }
.cfg-faixa-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cfg-faixa-row label { display: inline-flex; align-items: center; gap: 6px; color: var(--cinza); font-size: .9rem; }
.cfg-faixa-nome { font-weight: 700; min-width: 92px; }
.cfg-faixa-row input { width: 72px; padding: 7px 9px; border: 1px solid var(--borda); border-radius: 8px; font-size: 16px; }
.cfg-faixa-row input:disabled { background: #f1f3f6; color: var(--cinza); }
.cfg-msg { margin-left: 10px; color: var(--acento); font-weight: 600; font-size: .85rem; }
.cfg-toggle { cursor: pointer; }
.cfg-toggle input { width: auto; }
.aviso-filtro {
    background: #fff5f0; border: 1px solid #ffd9c9; border-radius: 8px;
    padding: 8px 12px; margin: 0 0 12px; font-size: .85rem; color: var(--cinza);
}
/* aviso do filtro instantâneo (sem resultado / capado em 300) — pedido Paulo 11/07 */
.filtro-hint { margin: -4px 0 12px; font-size: .82rem; color: var(--cinza); font-style: italic; }
.cfg-dist { display: flex; gap: 14px; flex-wrap: wrap; }
.cfg-faixa { flex: 1 1 180px; border-radius: 12px; padding: 18px 20px; color: #fff; }
.cfg-faixa--alto { background: var(--acento); }
.cfg-faixa--medio { background: var(--gopoints); }
.cfg-faixa--baixo { background: var(--cinza); }
.cfg-faixa__num { display: block; font-size: 2rem; font-weight: 800; font-family: var(--fonte-titulo); }
.cfg-faixa__lbl { font-size: .85rem; opacity: .95; }

/* ── Tela de detalhe da oportunidade ────────────────────────────── */
.detalhe { background: var(--branco); border: 1px solid var(--borda); border-radius: 12px; padding: 22px 24px; box-shadow: 0 1px 3px rgba(0,0,0,.04); max-width: 920px; display: flex; flex-direction: column; gap: 22px; }
.detalhe__topo { display: flex; align-items: center; gap: 16px; }
.detalhe__score { display: flex; align-items: center; gap: 6px; }
.detalhe__score .score { font-size: 1.15rem; padding: 6px 14px; }
.detalhe__motivo { color: var(--cinza); font-size: .85rem; margin-top: 6px; }
.detalhe__objeto h2, .detalhe__bloco h3 { font-family: var(--fonte-titulo); color: var(--primaria); margin: 0 0 8px; }
.detalhe__objeto h2 { font-size: 1.05rem; }
.detalhe__objeto p { margin: 0; line-height: 1.55; color: #334155; }
.detalhe__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 24px; border-top: 1px solid var(--borda); padding-top: 18px; }
.detalhe__grid > div { display: flex; flex-direction: column; gap: 2px; }
.detalhe__lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cinza); font-weight: 700; }
.detalhe__lado { display: flex; gap: 28px; flex-wrap: wrap; border-top: 1px solid var(--borda); padding-top: 18px; }
.detalhe__bloco { flex: 1 1 240px; }
.chip { display: inline-block; background: #eef2ff; color: var(--primaria); border: 1px solid #dbe2ff; border-radius: 999px; padding: 4px 12px; margin: 0 6px 6px 0; font-size: .8rem; font-weight: 600; }
/* 🏷️ Produtos da licitação — o vendedor corrige o que o matcher errou (Paulo 14/07) */
.prod-flag { color: var(--acento); font-weight: 700; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; }
.prod-chips { margin: 0 0 8px; }
.prod-vazio { color: var(--cinza); font-size: .85rem; }
.prod-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.prod-lista { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; margin: 8px 0; }
.prod-item { display: flex; align-items: center; gap: 8px; font-size: .88rem; cursor: pointer; }
.prod-hist { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.prod-hist li { font-size: .78rem; color: var(--cinza); border-left: 3px solid var(--borda); padding-left: 8px; line-height: 1.45; }
.prod-de { text-decoration: line-through; opacity: .75; }
.prod-para { color: var(--primaria); font-weight: 600; }
/* Célula 🏷️ Produto(s) do radar de normas (a correção abre em modal — a linha é estreita). */
.prod-cel__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.prod-cel__abrir { margin-top: 4px; }
.detalhe__irmaos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.detalhe__irmaos a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }

/* ── Login (página independente) ───────────────────────────────────── */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh;
    background: linear-gradient(160deg, var(--azul) 0%, var(--azul-claro) 100%); padding: 24px; }
.login-card { background: var(--branco); border-radius: 16px; padding: 36px 32px; width: 100%;
    max-width: 380px; box-shadow: 0 18px 50px rgba(0,0,0,.28); text-align: center; }
.login-marca { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.7rem; color: var(--azul); }
.login-marca span { color: var(--acento); }
/* Página pública de aprovação do Financeiro */
.aprov-card { max-width: 560px; text-align: left; }
.aprov-detalhe { background: #f7f8fa; border: 1px solid var(--borda); border-radius: 10px; padding: 12px 14px; margin: 14px 0; }
.aprov-detalhe p { margin: 4px 0; }
.aprov-portal { display: inline-block; margin: 6px 0 2px; }
.aprov-cadastro { margin: 6px 0 2px; font-size: .9rem; }
.aprov-cadastro a { color: var(--acento); font-weight: 700; }
.aprov-docs { background: #f7f8fa; border: 1px solid var(--borda); border-radius: 10px; padding: 12px 14px; margin: 0 0 14px; }
.aprov-docs ol { margin: 6px 0 8px; padding-left: 22px; }
.aprov-docs li { margin: 3px 0; font-size: .95rem; }
.aprov-form { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.aprov-form select { padding: 9px 11px; border: 1px solid var(--borda); border-radius: 8px; font-size: 15px; }
.aprov-botoes { display: flex; gap: 10px; }
.aprov-aprovar { background: #16794b; }
.aprov-reprovar { background: #b03636; color: #fff; }
.aprov-resultado { border-radius: 10px; padding: 14px; font-size: 1.05rem; margin: 10px 0; text-align: center; }
.aprov-resultado--aprovada { background: #e7f5ee; border: 1px solid #16794b; }
.aprov-resultado--reprovada { background: #fdeaea; border: 1px solid #b03636; }
.login-sub { color: var(--cinza); margin: 4px 0 22px; font-size: .9rem; }
.login-form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.login-form label { font-size: .82rem; font-weight: 600; color: var(--cinza); display: flex; flex-direction: column; gap: 5px; }
.login-form input { padding: 11px 12px; border: 1px solid var(--borda); border-radius: 9px; font-size: 16px; }
.login-form input:focus { outline: none; border-color: var(--acento); }
.login-btn { margin-top: 6px; width: 100%; justify-content: center; }
.login-erro { background: #fdecec; color: #b3261e; border: 1px solid #f5c2c0; border-radius: 9px;
    padding: 10px 12px; font-size: .86rem; margin-bottom: 16px; }
.login-rodape { color: #aab; font-size: .72rem; margin: 18px 0 0; }

/* ── Menu: área do usuário (Perfil / Admin / Sair) ─────────────────── */
.topo__nav .nav-admin { background: rgba(255,81,27,.18); color: #ffd9cc; }
.topo__nav .nav-sair { color: #f3b0a0; }
.topo__nav .nav-sair:hover { background: rgba(255,81,27,.25); color: #fff; }

/* ── Perfil ────────────────────────────────────────────────────────── */
.perfil { max-width: 520px; }
.perfil-form { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.perfil-campo { display: flex; flex-direction: column; gap: 5px; }
.perfil-campo label { font-weight: 600; font-size: .85rem; color: var(--cinza); }
.perfil-campo small { color: #8a8a8a; font-weight: 400; }
.perfil-campo input { padding: 10px 12px; border: 1px solid var(--borda); border-radius: 9px; font-size: 16px; }
.perfil-campo input:disabled { background: #f3f4f7; color: #888; }
.perfil-campo input:focus { outline: none; border-color: var(--acento); }
.perfil-senha { border: 1px solid var(--borda); border-radius: 11px; padding: 14px 16px 18px;
    display: flex; flex-direction: column; gap: 12px; }
.perfil-senha legend { font-family: var(--fonte-titulo); font-weight: 600; padding: 0 6px; color: var(--azul); }
.aviso { padding: 11px 14px; border-radius: 9px; font-size: .88rem; margin-top: 12px; }
.aviso--ok { background: #e7f6ec; color: #1d6b35; border: 1px solid #bce3c9; }
.aviso--erro { background: #fdecec; color: #b3261e; border: 1px solid #f5c2c0; }

/* ── Login: link auxiliar (esqueci senha) ──────────────────────────── */
.login-link { text-align: center; margin: 14px 0 0; font-size: .85rem; }
.login-link a, .login-rodape a { color: var(--acento); text-decoration: none; }

/* ── Admin: controle de usuários ───────────────────────────────────── */
.us-form { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 8px; align-items: center; }
.us-form input, .us-form select { padding: 9px 11px; border: 1px solid var(--borda); border-radius: 8px; font-size: 15px; }
.us-form .btn { grid-column: 1 / -1; }
/* DataCubo (embed do Superset) */
.cubo-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.cubo-dica { color: var(--cinza); font-size: .9rem; }
.cubo-frame { width: 100%; height: calc(100vh - 220px); min-height: 480px; border: 1px solid var(--borda); border-radius: 10px; background: #fff; }
.cubo-mobile-dica { display: none; }   /* DataCubo é BI de desktop — dica só no celular (@media abaixo) */
.cubo-scroll { width: 100%; max-width: 100%; }
/* ⚠️ Estas regras de MOBILE ficam DEPOIS das base acima de propósito (mesma especificidade → a ÚLTIMA
   vence; media query NÃO adiciona especificidade). Foi o bug da v0.41.73: o override do mobile estava
   ANTES da base e perdia. DataCubo (Superset, BI de desktop) no celular: iframe com LARGURA DE PC
   (1280px) numa caixa que ROLA de lado → o menu NÃO trunca (ele acha que tem tela de computador) e você
   desliza ↔. Determinístico (pedido Paulo 12/07, depois de viewport/CSS-injection falharem em iframe). */
@media (max-width: 820px) {
    .cubo-mobile-dica { display: block; background: #fff7ed; border: 1px solid #fed7aa;
        color: #9a3412; border-radius: 8px; padding: 8px 12px; font-size: .82rem; margin-bottom: 8px; }
    .cubo-scroll { overflow-x: auto; border: 1px solid var(--borda); border-radius: 10px; }
    .cubo-frame { width: 1280px; border: 0; border-radius: 0; }
}

/* Drill-down dos relatórios — "também em" (edital/norma compartilhado entre produtos) */
.drill-tambem { color: #b5530f; font-size: .8rem; }

/* DataTag (Hub Lexus/Focus) */
.dt-sel { display: flex; gap: 16px; flex-wrap: wrap; align-items: end; margin-bottom: 14px; }
.dt-sel select { padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; font-size: 14px; }
.dt-cards { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0 14px; }
.dt-lista { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.dt-lista li { border: 1px solid var(--borda); border-radius: 8px; padding: 4px 10px; font-size: .9rem; }
/* Visitantes online por tipo — as "bolinhas" coloridas (espelha o painel do CRM) */
.dt-buckets { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 14px; }
.dt-bucket { display: flex; align-items: center; gap: 8px; background: var(--branco);
    border: 1px solid var(--borda); border-left: 5px solid var(--dt-cor, #64748b);
    border-radius: 10px; padding: 8px 14px; }
.dt-bucket__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--dt-cor, #64748b); flex: none; }
.dt-bucket__n { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.4rem; color: var(--dt-cor, #64748b); line-height: 1; }
.dt-bucket__l { font-size: .78rem; font-weight: 600; color: var(--cinza); text-transform: uppercase; letter-spacing: .3px; }

/* Scatter das bolinhas INDIVIDUAIS — 1 bolinha = 1 visitante (espelha o painel do CRM) */
.dt-amostra-tag { font-family: var(--fonte-corpo); font-size: .72rem; font-weight: 600;
    color: var(--cinza); background: var(--fundo); border: 1px solid var(--borda);
    border-radius: 999px; padding: 2px 10px; vertical-align: middle; margin-left: 8px; }
.dt-scatter { position: relative; height: 320px; background: #f8fafc;
    border: 1px solid var(--borda); border-radius: 12px; margin: 8px 0 6px; overflow: hidden; }
.dt-scatter__cols { display: flex; height: 100%; }
.dt-scatter__col { flex: 1; min-width: 60px; border-left: 1px dashed #e2e8f0; position: relative; }
.dt-scatter__col:first-child { border-left: none; }
.dt-scatter__hora { position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
    background: #475569; color: #fff; font-size: 10px; font-weight: 700; font-family: var(--fonte-corpo);
    padding: 2px 7px; border-radius: 4px; white-space: nowrap; }
.dt-scatter__dot { position: absolute; width: 14px; height: 14px; border-radius: 50%;
    background: var(--dt-cor, #3b82f6); border: 1.5px solid var(--branco); display: block;
    box-shadow: 0 1px 3px rgba(0,0,0,.2); margin-left: -7px; margin-top: -7px; cursor: pointer;
    transition: transform .15s; z-index: 1; }
.dt-scatter__dot:hover { transform: scale(1.7); z-index: 10; }

/* Tela do visitante (drilldown da bolinha → dados DataBusca) */
.dt-vis-cab { background: var(--branco); border: 1px solid var(--borda); border-left: 5px solid var(--acento, #FF511B);
    border-radius: 12px; padding: 14px 18px; margin: 6px 0 14px; }
.dt-vis-cab__nome { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.3rem; color: var(--azul, #051F4E); }
.dt-vis-cab__linha { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 6px; color: var(--cinza); font-size: .92rem; }
.dt-vis-cab__linha b { color: var(--texto, #1f1f1f); }
.dt-vis-tab { width: 100%; border-collapse: collapse; margin: 6px 0 16px; font-size: .9rem; }
.dt-vis-tab th { text-align: left; width: 38%; vertical-align: top; padding: 6px 12px 6px 0;
    color: var(--cinza); font-weight: 600; border-bottom: 1px solid var(--borda); }
.dt-vis-tab td { padding: 6px 0; border-bottom: 1px solid var(--borda); overflow-wrap: anywhere; }
.dt-vis-tab--full th { font-family: monospace; font-size: .8rem; font-weight: 500; }

/* Módulos contratáveis (DataCubo/DataTag) */
.mod-bloco { border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; margin: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.mod-bloco input[type="text"], .mod-bloco input[type="password"] { padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; font-size: 14px; }

/* Onboarding (wizard white-label) */
.onb-passo { background: #fff; border: 1px solid var(--borda); border-radius: 12px; padding: 16px 18px; margin: 0 0 16px; max-width: 900px; }
.onb-passo h2 { margin: 0 0 8px; font-size: 1.1rem; color: var(--primaria); }
.onb-passo > input[type="text"], .onb-passo > textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px; font-size: 15px; margin-bottom: 8px; box-sizing: border-box; }
.onb-produto { display: grid; grid-template-columns: 1fr; gap: 6px; border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.onb-produto input, .onb-produto textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; font-size: 14px; box-sizing: border-box; }
.onb-produto .onb-p-rm { justify-self: start; padding: 4px 10px; font-size: 13px; }
.us-reenv { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 2px; }
.btn-sec { background: #fff; color: var(--primaria); border: 1px solid var(--primaria); border-radius: 8px; padding: 8px 14px; font-size: 14px; cursor: pointer; }
.btn-sec:hover { background: #f0f3fb; }
.btn-sec:disabled { opacity: .5; cursor: default; }
.us-lista { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; }
.us-item { border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; }
.us-item__cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.us-mail { color: var(--cinza); font-size: .85rem; }
.us-tag { background: #fff3e8; color: #b5530f; border: 1px solid #f3d4b8; border-radius: 6px; padding: 1px 7px; font-size: .72rem; }
.us-tag--ferias { background: #e3f2fd; color: #0d47a1; border-color: #bbdefb; }  /* ausente/férias (Paulo 10/07) */
/* usuário DESATIVADO (Paulo 17/07): a linha só ficava 50% apagada e o admin não achava como desfazer */
.us-tag--off { background: #FDEBEA; color: #A3261B; border-color: #F5C2BD; font-weight: 600; }
.us-toggle--on { background: #14683A; border-color: #14683A; color: #fff; }  /* ✅ Reativar em destaque */
.us-item__meta { color: #8a8a8a; font-size: .78rem; margin: 3px 0 8px; }
.us-item .adm-botoes { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.us-perfil-sel { padding: 5px 8px; border: 1px solid var(--borda); border-radius: 7px; font-size: .8rem; }
.us-link { display: inline-block; margin-top: 4px; background: #f3f4f7; padding: 4px 8px; border-radius: 6px; font-size: .8rem; word-break: break-all; }
.us-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; padding: 10px; background: #f7f8fa; border: 1px solid var(--borda); border-radius: 8px; }
.us-edit input, .us-edit select { padding: 8px 10px; border: 1px solid var(--borda); border-radius: 7px; font-size: .9rem; }
.us-edit .adm-botoes, .us-edit .us-ed-msg { grid-column: 1 / -1; }
@media (max-width: 820px) { .us-form, .us-edit { grid-template-columns: 1fr; } }

/* ── Admin: relatório de uso por usuário ────────────────────────────── */
.uso-controles { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.uso-controles select { padding: 6px 10px; border: 1px solid var(--borda); border-radius: 7px; font-size: .85rem; }
.uso-tab { width: 100%; border-collapse: collapse; font-size: .85rem; }
.uso-tab th, .uso-tab td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--borda); vertical-align: top; }
.uso-tab th { font-family: var(--fonte-titulo); font-size: .76rem; color: var(--cinza); text-transform: uppercase; letter-spacing: .03em; }
.uso-tab tbody tr:hover { background: #fafbfd; }
.uso-tab .uso-inativo { opacity: .55; }

/* ── Relatórios de medalhas ────────────────────────────────────────── */
.rel-bloco { margin: 22px 0 30px; }
.rel-titulo { font-family: var(--fonte-titulo); color: var(--azul); margin: 0 0 4px; }
/* 📨 Recebidas — abas de tipo (Licitação/RFP/Norma) + cabeçalho de seção (Ramalho 11/08) */
.rec-abas { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.rec-aba { padding: 7px 14px; border: 1px solid var(--borda); border-radius: 999px;
    background: #fff; color: var(--azul); text-decoration: none; font-size: .9rem; }
.rec-aba--on { background: var(--azul); color: #fff; border-color: var(--azul); font-weight: 600; }
.rec-grupo { font-family: var(--fonte-titulo); color: var(--azul); font-size: 1.02rem;
    margin: 14px 0 6px; padding-left: 4px; border-left: 3px solid var(--acento); }
.rec-foco { background: #fff6f2; border: 1px solid #ffd9c9; border-radius: 8px;
    padding: 8px 12px; margin: 8px 0; }
.rec-foco--aviso { background: #fff8e6; border-color: #f0c869; }  /* item remanejado (Paulo 24/08) */
.rec-vencida { color: #b23c17; font-size: .78rem; font-weight: 600; white-space: nowrap; }
/* ✅ Relatório de aprovações — Financeiro abriu? (Paulo 12/08) */
.apr-abriu { color: #1a7f37; font-weight: 700; }
.apr-nao-abriu { color: #8a6d3b; font-weight: 700; }
/* 🚫 Palavras negativas (Paulo 11/08) */
.kw-neg { margin: 30px 0; padding-top: 18px; border-top: 2px solid var(--borda); }
.kw-neg__titulo { font-family: var(--fonte-titulo); color: var(--azul); }
.kw-neg-bloco { margin: 12px 0; }
.neg-add { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.neg-lbl { flex: 1; }
.kw-tag-ia { background: #eaf5ea; color: #1b5e20; border-radius: 6px; padding: 1px 6px; font-size: .78rem; }
.neg-sug { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 8px;
    margin: 4px 0; background: #fff6f2; border: 1px solid #ffd9c9; border-radius: 8px; }
.neg-sug span { flex: 1; }
.rel-medalhas { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0 16px; }
.rel-med { flex: 1 1 120px; border: 1px solid var(--borda); border-radius: 12px; padding: 14px 16px;
    background: var(--branco); display: flex; flex-direction: column; gap: 2px; }
.rel-med__n { font-family: var(--fonte-titulo); font-size: 1.8rem; font-weight: 800; line-height: 1; }
.rel-med__lbl { font-weight: 600; font-size: .9rem; }
.rel-med__faixa { color: #8a8a8a; font-size: .75rem; }
.rel-med--ouro { border-top: 4px solid #d4a017; }
.rel-med--prata { border-top: 4px solid #9aa3ad; }
.rel-med--bronze { border-top: 4px solid #b87333; }
.rel-med--demais { border-top: 4px solid var(--borda); }
.rel-med--total { background: var(--azul); color: #fff; border-color: var(--azul); }
.rel-med--total .rel-med__faixa { color: #cbd5e1; }
.rel-tab { width: 100%; border-collapse: collapse; font-size: .9rem; }
/* Linha do tempo da triagem (Serve / Não serve) */
.tl--ok { color: #16794b; font-weight: 600; white-space: nowrap; }
.tl--no { color: #b03636; font-weight: 600; white-space: nowrap; }
.tl--undo { color: var(--cinza); white-space: nowrap; }
.rel-tab th, .rel-tab td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--borda); }
.rel-tab th { font-family: var(--fonte-titulo); font-size: .76rem; color: var(--cinza); text-transform: uppercase; letter-spacing: .03em; }
.rel-tab tbody tr:hover { background: #fafbfd; }
/* celular: aperta as colunas (menos padding + números centralizados) pra o Total CABER, não cortar
   no canto direito (pedido Paulo 12/07 — relatório de medalhas). */
@media (max-width: 820px) {
    .rel-tab th, .rel-tab td { padding: 8px 5px; font-size: .82rem; }
    .rel-tab th:not(:first-child), .rel-tab td:not(:first-child) { text-align: center; }
}
.rel-vazio { color: #8a8a8a; font-style: italic; }

/* ── Comparativo competitivo (/comparativo) ───────────────────────────────── */
.cmp__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.cmp__titulo { font-family: var(--fonte-titulo); color: var(--azul); margin: 0 0 .2rem; }
.cmp__acoes { display: flex; gap: .5rem; }
.cmp-btn { font-family: var(--fonte-titulo); font-size: .82rem; font-weight: 600; color: var(--azul);
    background: #fff; border: 1px solid var(--borda); border-radius: 8px; padding: .4rem .7rem; cursor: pointer; }
.cmp-btn:hover { border-color: var(--azul); }
.cmp__legenda { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0 1rem; }
.cmp-leg { font-size: .78rem; padding: .2rem .55rem; border-radius: 999px; border: 1px solid var(--borda); background: #fff; }

.cmp-tabela { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .86rem; }
.cmp-tabela th, .cmp-tabela td { border-bottom: 1px solid var(--borda); padding: .5rem .6rem; }
.cmp-tabela thead th { position: sticky; top: 0; z-index: 3; background: var(--azul); color: #fff;
    font-family: var(--fonte-titulo); font-size: .8rem; text-align: center; vertical-align: bottom; }
.cmp-col-feat { text-align: left !important; min-width: 230px; }
.cmp-col-conc { min-width: 92px; border-top: 3px solid var(--cor, transparent); }
.cmp-col-conc .cmp-conc-nome { display: block; line-height: 1.15; }
.cmp-col--ph3a { background: var(--acento) !important; }
.cmp-tag-nos { display: inline-block; font-size: .62rem; background: #fff; color: var(--acento);
    border-radius: 999px; padding: 0 .4rem; margin-top: .2rem; font-weight: 700; }

/* 1ª coluna (feature) fixa */
.cmp-feat { position: sticky; left: 0; z-index: 2; background: #fff; text-align: left; vertical-align: top; }
.cmp-feat-nome { font-weight: 600; color: #1f1f1f; }
.cmp-feat-sub { display: block; color: var(--cinza); font-size: .72rem; margin-top: .15rem; }
.cmp-tabela tbody tr:hover .cmp-feat { background: #fafbfd; }

.cmp-cat td { background: #eef1f6; font-family: var(--fonte-titulo); font-weight: 700; color: var(--azul);
    font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; position: sticky; left: 0; }
.cmp-cel { text-align: center; font-size: 1.05rem; }
.cmp-cel--edit { cursor: pointer; }
.cmp-cel--edit:hover { outline: 2px solid var(--acento); outline-offset: -2px; }

/* cores por marcador */
.mk-sim { background: #e7f6ec; }
.mk-addon { background: #fff7e6; }
.mk-parcial { background: #eef3fb; }
.mk-nao { background: #fdecec; }
.mk-desc { background: #fff; color: #b8b8b8; }

.cmp-del-conc, .cmp-del-feat { border: none; background: transparent; color: #fff; opacity: .55;
    cursor: pointer; font-size: .7rem; margin-left: .25rem; }
.cmp-del-feat { color: #c0392b; }
.cmp-del-conc:hover, .cmp-del-feat:hover { opacity: 1; }
.cmp__rodape { margin-top: 1rem; }

/* ── Análise IA do edital (detalhe) ───────────────────────────────────────── */
.ia-analise__topo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.ia-analise__btn { white-space: nowrap; }
.ia-analise__resumo { margin: .4rem 0; }
.ia-analise__pontos { margin: .4rem 0 .6rem 1.1rem; color: var(--cinza); }
.ia-analise__pontos li { margin: .15rem 0; }
.ia-analise__prazo { color: var(--acento); font-weight: 600; }
.ia-analise__fit { margin: .6rem 0; }
.ia-fit { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; border-top: 1px solid var(--borda); }
.ia-fit__prod { font-weight: 600; color: var(--azul); min-width: 120px; }
.ia-fit__just { color: var(--cinza); font-size: .88rem; }
.ia-analise__rec { margin-top: .6rem; }
.ia-analise__meta { margin-top: .5rem; }

/* ── Dashboard / BI (/dashboard) ──────────────────────────────────────────── */
.dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin: 1rem 0; }
.dash-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.dash-card { background: #fff; border: 1px solid var(--borda); border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.dash-card__t { font-family: var(--fonte-titulo); font-size: .95rem; color: var(--azul); margin: 0 0 .7rem; }
.dash-bars { display: flex; flex-direction: column; gap: .45rem; }
.dash-bar { display: grid; grid-template-columns: 130px 1fr 40px; align-items: center; gap: .5rem; }
.dash-bar__lbl { font-size: .82rem; color: var(--cinza); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-bar__track { background: #f1f3f7; border-radius: 999px; height: 16px; overflow: hidden; }
.dash-bar__fill { display: block; height: 100%; border-radius: 999px; min-width: 2px; }
.dash-bar__n { font-weight: 700; font-size: .82rem; text-align: right; color: var(--texto); }
/* Número CLICÁVEL do Dashboard → drill (Paulo 19/08): parece número, mas dá pra clicar/filtrar. */
.dash-link { color: inherit; text-decoration: none; border-bottom: 1px dashed rgba(0,0,0,.28); cursor: pointer; }
.dash-link:hover { color: var(--acento); border-bottom-style: solid; }
.dash-fill--nova { background: #1f6feb; }
.dash-fill--avaliando { background: #f08c00; }
.dash-fill--participar { background: #2f9e44; }
.dash-fill--descartada { background: #adb5bd; }
.dash-faixa { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.dash-faixa__c { border-radius: 10px; padding: .7rem; text-align: center; display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; }
.dash-faixa__c .kpi__num { font-size: 1.6rem; }
.dash-faixa__c.score--alto { background: #e7f6ec; }
.dash-faixa__c.score--medio { background: #fff7e6; }
.dash-faixa__c.score--baixo { background: #f1f3f7; }
@media (max-width: 820px) { .dash-kpis, .dash-grid, .dash-faixa { grid-template-columns: 1fr; } }

/* Comparativo: cabeçalho FIXO ao rolar a PÁGINA, logo ABAIXO da nav sticky.
   overflow visível = a página é o container de rolagem (sem caixa interna), então
   o thead gruda no viewport; `top` = altura da nav (medida por JS em --nav-h). */
.cmp .tabela-wrap { overflow: visible; }
.cmp-tabela thead th { top: var(--nav-h, 0px); }
.cmp-col-feat { left: 0; z-index: 5; }  /* canto: sticky no topo (via thead th) E à esquerda */

/* ── Gestão do processo (detalhe) ─────────────────────────────────────────── */
.nota-txt { width: 100%; border: 1px solid var(--borda); border-radius: 8px; padding: .5rem; font-family: inherit; resize: vertical; }
.gestao__add { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; margin-bottom: .8rem; }
.gestao__notas { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.gestao-nota { background: #fafbfd; border: 1px solid var(--borda); border-radius: 8px; padding: .5rem .7rem; }
.gestao-nota p { margin: 0 0 .2rem; }
.gestao-nota small, .gestao__hist small { color: var(--cinza); }
.gestao__hist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; }
.prazo-inp { border: 1px solid var(--borda); border-radius: 8px; padding: .35rem .5rem; font-family: inherit; }

/* ── Sócios (QSA) do CNPJ no cadastro de contratante ──────────────────────── */
.ct-socios { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.ct-socios__lbl { font-size: .8rem; color: var(--cinza); margin-right: 4px; }
.ct-socio { font-size: .8rem; font-weight: 600; color: var(--azul); background: #eef2ff;
    border: 1px solid #dbe2ff; border-radius: 999px; padding: 4px 11px; cursor: pointer; }
.ct-socio:hover { background: var(--azul); color: #fff; border-color: var(--azul); }
.ct-socio--admin { background: #fff7e6; border-color: #ffd591; color: #b06b00; }
.ct-socio--admin:hover { background: var(--acento); color: #fff; border-color: var(--acento); }

/* ── Telas de Manual (/manual e /manual-sistema) ─────────────────────────── */
.pagina-titulo { font-family: "Poppins", sans-serif; color: var(--azul); margin: 18px 0 12px; }
.manual-conteudo {
    background: var(--branco); border: 1px solid var(--borda); border-radius: 12px;
    padding: 26px 30px; max-width: 900px; line-height: 1.65; color: var(--texto);
}
.manual-conteudo h1, .manual-conteudo h2, .manual-conteudo h3 {
    font-family: "Poppins", sans-serif; color: var(--azul); margin: 22px 0 10px; line-height: 1.3;
}
.manual-conteudo h1 { font-size: 1.5rem; }
.manual-conteudo h2 { font-size: 1.25rem; border-bottom: 1px solid var(--borda); padding-bottom: 6px; }
.manual-conteudo h3 { font-size: 1.08rem; }
.manual-conteudo p { margin: 10px 0; }
.manual-conteudo ul, .manual-conteudo ol { margin: 10px 0 10px 22px; }
.manual-conteudo li { margin: 4px 0; }
.manual-conteudo a { color: var(--acento); }
.manual-conteudo code {
    background: var(--fundo); border: 1px solid var(--borda); border-radius: 5px;
    padding: 1px 6px; font-size: .86em;
}
.manual-conteudo pre { background: var(--fundo); border: 1px solid var(--borda); border-radius: 8px; padding: 14px; overflow-x: auto; }
.manual-conteudo pre code { border: 0; padding: 0; }
.manual-conteudo blockquote {
    margin: 12px 0; padding: 10px 16px; border-left: 4px solid var(--acento);
    background: var(--fundo); border-radius: 0 8px 8px 0;
}
.manual-conteudo blockquote > :first-child { margin-top: 0; }
.manual-conteudo blockquote > :last-child { margin-bottom: 0; }
.manual-conteudo table { border-collapse: collapse; margin: 14px 0; width: 100%; }
.manual-conteudo th, .manual-conteudo td { border: 1px solid var(--borda); padding: 8px 12px; text-align: left; font-size: .9rem; }
.manual-conteudo th { background: var(--fundo); }
.manual-conteudo hr { border: 0; border-top: 1px solid var(--borda); margin: 22px 0; }
.manual-cru { white-space: pre-wrap; word-break: break-word; }
.nav-manual { font-weight: 600; }

/* 📲 Botão flutuante "Instalar app" (PWA) — pedido Paulo 11/07. Some quando já instalado/dispensado. */
#pwa-instalar {
  position: fixed; right: 12px; bottom: 20px; z-index: 9005;
  display: flex; align-items: center; gap: 2px;
  background: var(--acento); color: #fff;
  border-radius: 999px; box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
  padding: 3px 3px 3px 6px;
}
#pwa-instalar[hidden] { display: none; }  /* o display:flex sobreporia o atributo hidden */
#pwa-instalar-btn {
  background: transparent; color: #fff; border: 0;
  font-weight: 700; font-size: .95rem; padding: 8px 10px; cursor: pointer;
}
#pwa-instalar-x {
  background: rgba(255, 255, 255, .22); color: #fff; border: 0;
  border-radius: 50%; width: 26px; height: 26px; line-height: 1;
  font-size: 1.1rem; cursor: pointer;
}
@media (max-width: 820px) {  /* acima da barra inferior (tabbar) no celular */
  #pwa-instalar { bottom: calc(66px + env(safe-area-inset-bottom)); }
}

/* Campo de DATA em DD/MM/AAAA (texto com máscara) — compacto como era o date nativo. Paulo 11/07. */
input.data-br { width: 8.5em; max-width: 100%; }

/* Atalhos de /relatorios — rótulos curtos (a descrição vai no title) pra não virar barra enorme no
   celular; espaçamento uniforme e quebra limpa. Auditoria de botões, pedido Paulo 11/07. */
.rel-atalhos { display: flex; flex-wrap: wrap; gap: 8px; }

/* 🔔 Sino de notificações (pedido Paulo 16/07) — no header, sempre visível (desktop + celular).
   `order: 5` joga o sino pra a direita do header em qualquer aba/tela. */
/* Sino: 2 botões (.sino-btn) compartilhando 1 painel (Paulo 18/07). Desktop = .sino-nav (no nav, entre
   Manual e Sair); mobile = .sino-mobile (no header, pois o nav vira gaveta display:none no celular). */
.sino { position: relative; background: none; border: 0; cursor: pointer; font-size: 1.15rem;
    line-height: 1; padding: 5px 7px; border-radius: 8px; color: #fff; }
.sino-nav { display: inline-flex; align-items: center; }   /* no nav (desktop) */
.sino-mobile { display: none; }                            /* aparece só no celular (media abaixo) */
.sino:hover { background: rgba(255, 255, 255, .12); }
.sino__badge { position: absolute; top: 0; right: 0; min-width: 17px; height: 17px; padding: 0 4px;
    background: var(--acento); color: #fff; border-radius: 99px; font-size: .68rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.sino__badge[hidden] { display: none; }
/* Badge do menu (Paulo 19/08): numerozinho de pendências em cima de cada opção do menu/abas. */
.nav-badge { display: inline-block; min-width: 16px; padding: 0 5px; margin-left: 5px; font-size: .7rem;
    font-weight: 700; line-height: 16px; text-align: center; color: #fff; background: var(--acento);
    border-radius: 999px; vertical-align: middle; }
.tabbar__item { position: relative; }
.tabbar__item .nav-badge { position: absolute; top: 3px; left: 50%; margin-left: 4px; }
/* painel COMPARTILHADO pelos 2 botões → position:fixed (dropdown no topo-direito, não preso a um wrapper) */
.sino-painel { position: fixed; top: 60px; right: 10px; width: min(360px, 92vw);
    max-height: 70vh; overflow-y: auto; background: var(--branco); color: var(--texto);
    border: 1px solid var(--borda); border-radius: 12px;
    box-shadow: 0 12px 40px -12px rgba(0, 0, 0, .35); z-index: 9030; }
/* No celular o sino do NAV some (o nav vira gaveta) e aparece o do HEADER, LOGO APÓS o Capturar, na MESMA
   linha (pedido Paulo 18/07). O header é apertado um pouco pra o conjunto caber sem quebrar em 2 linhas. */
@media (max-width: 820px) {
    .sino-nav { display: none; }
    .sino-mobile { display: inline-flex; align-items: center; order: 6; margin-left: 4px;
        font-size: 1rem; padding: 3px 5px; }              /* order:6 = depois do Capturar; sem margin auto */
    .topo { gap: 8px; }
    .topo__marca { font-size: 1.05rem; }
    .topo__acoes { gap: 5px; }
    .topo__acoes .btn { padding: 5px 8px; font-size: .76rem; }
}
.sino-painel[hidden] { display: none; }
.sino-painel__cab { display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-bottom: 1px solid var(--borda); position: sticky; top: 0;
    background: var(--branco); }
.sino-painel__limpar { background: none; border: 0; color: var(--acento); cursor: pointer;
    font-size: .78rem; }
.sino-painel__lista { padding: 4px; }
.sino-vazio { color: var(--cinza); font-size: .85rem; text-align: center; padding: 20px 0; }
.sino-item { display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none;
    color: var(--texto); border-left: 3px solid transparent; }
.sino-item:hover { background: var(--fundo); }
.sino-item.nao-lida { border-left-color: var(--acento); background: #fff6f2; }
.sino-item__tit { font-weight: 600; font-size: .88rem; }
.sino-item__txt { font-size: .82rem; color: var(--cinza); margin-top: 2px; }
.sino-item__quando { font-size: .72rem; color: var(--cinza); margin-top: 3px; }
.sino-push { display: block; width: calc(100% - 8px); margin: 4px; padding: 9px;
    border: 1px dashed var(--acento); background: #fff6f2; color: var(--acento); border-radius: 8px;
    cursor: pointer; font-size: .82rem; }
.sino-push[hidden] { display: none; }

/* 📁 Acompanhamento (/financeiro) — monitoramento pós-Serve (pedido Paulo 16/07). */
.fin-badge { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: .78rem;
    font-weight: 600; }
.fin-ok { background: #E7F6EC; color: #14683A; }
.fin-prep { background: #FFF2E8; color: #C23C10; }
.fin-pend { background: #FEF6E0; color: #8a6d00; }
.fin-no { background: #FDEBEA; color: #A3261B; }
.fin-prog { height: 7px; background: var(--borda); border-radius: 99px; overflow: hidden;
    max-width: 120px; }
.fin-prog span { display: block; height: 100%; background: var(--acento); }
.fin-urg, .fin-venc { color: #A3261B; font-weight: 700; }
.fin-filtros { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 16px; }
.fin-filtro { padding: 6px 12px; border: 1px solid var(--borda); border-radius: 99px;
    text-decoration: none; color: var(--cinza); font-size: .85rem; }
.fin-filtro.is-on { background: var(--azul); color: #fff; border-color: var(--azul); }
.fin-portal { display: inline-block; margin-top: 3px; color: var(--acento); font-weight: 700; font-size: .82rem; }
.fin-cadastro { display: inline-block; margin-top: 3px; color: #1f6feb; font-weight: 600; font-size: .8rem; }
.fin-result-set { margin-top: 4px; font-weight: 700; color: #051F4E; font-size: .85rem; }
.fin-result-form { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; align-items: center; }
.fin-result-form select, .fin-result-form input { font-size: .78rem; padding: 3px 6px; border: 1px solid var(--borda); border-radius: 6px; min-width: 0; }
.fin-result-form input { flex: 1 1 90px; }
.fin-trilha { font-size: .8rem; color: var(--cinza); }
.fin-trilha div { margin: 1px 0; }
.fin-trilha-no { color: #A3261B; }
.fin-trilha-aguarda { color: #8a6d00; }
.fin-trilha-motivo { color: var(--texto); background: #FDEBEA; border-radius: 6px; padding: 2px 6px;
    margin-top: 2px; display: inline-block; }

/* 📡 Captura por fonte (/relatorios/fontes) — sinal de crawler quebrado (pedido Paulo 16/07). */
.fnt-alerta { background: #FDEBEA; border: 1px solid #F5C2BD; color: #A3261B; border-radius: 10px;
    padding: 12px 14px; margin: 8px 0 14px; }
.fnt-suspeita { background: #FDEBEA; }
.fnt-badge { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: .78rem;
    font-weight: 600; }
.fnt-ok { background: #E7F6EC; color: #14683A; }
.fnt-no { background: #FDEBEA; color: #A3261B; }
.fnt-quiet { background: #FEF6E0; color: #8a6d00; }
/* Tipo/mundo da fonte: L=Licitação · R=RFP · N=Normas */
.fnt-mundo { display: inline-block; min-width: 20px; text-align: center; padding: 1px 7px;
    border-radius: 6px; font-size: .78rem; font-weight: 700; }
.fnt-mundo--l { background: #E7EEF9; color: #1b3f78; }   /* 📑 Licitação (navy) */
.fnt-mundo--r { background: #FDECE3; color: #b5431a; }   /* 🏢 RFP privada (laranja) */
.fnt-mundo--n { background: #EDE7F6; color: #4b3277; }   /* ⚖️ Normas (roxo) */
.fnt-mundo--x { background: #eceff1; color: #455a64; }   /* desconhecido */

/* 📄 Documentos — guia de upload por fonte (Paulo 20/08) */
.doc-bloco { background: #fff; border: 1px solid var(--borda); border-radius: 12px; padding: 20px 22px; margin: 16px 0; box-shadow: 0 2px 8px rgba(5,31,78,.05); }
.doc-bloco--mestre { border-left: 4px solid var(--acento); background: #fffdf9; }
.doc-bloco h2 { margin: 0 0 10px; font-size: 1.15rem; color: var(--primaria); }
.doc-nota { color: var(--texto-2); font-size: .92rem; margin: 6px 0 12px; }
.doc-sub { font-weight: 600; color: var(--primaria); margin: 14px 0 6px; }
.doc-destaque { background: #fff3e8; border: 1px solid var(--acento); border-radius: 8px; padding: 10px 14px; margin: 8px 0 12px; font-size: .95rem; }
.doc-passos { margin: 0 0 6px; padding-left: 22px; }
.doc-passos li { margin: 8px 0; line-height: 1.5; }
.doc-lista { margin: 0 0 6px; padding-left: 20px; }
.doc-lista li { margin: 6px 0; line-height: 1.45; }
.doc-lista--check li { list-style: none; position: relative; padding-left: 24px; }
.doc-lista--check li::before { content: "📎"; position: absolute; left: 0; }
.doc-vazio { color: var(--texto-2); font-size: .9rem; }

/* 🔎 DataBusca — form de consulta (Paulo 20/08) */
.db-form { background: #fff; border: 1px solid var(--borda); border-radius: 12px; padding: 18px 20px; margin: 14px 0; box-shadow: 0 2px 8px rgba(5,31,78,.05); max-width: 720px; }
.db-tipos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.db-tipo { display: inline-flex; align-items: center; gap: 6px; background: var(--fundo); border: 1px solid var(--borda); border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--texto); }
.db-tipo input { accent-color: var(--acento); }
.db-campo { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.db-campo label { font-size: .88rem; color: var(--texto-2); font-weight: 600; }
.db-campo input { display: block; margin-top: 4px; padding: 9px 11px; border: 1px solid var(--borda); border-radius: 8px; font-size: 1rem; min-width: 240px; }
.db-status { max-width: 720px; background: #fffdf9; border: 1px solid var(--borda); border-left: 4px solid var(--acento); border-radius: 10px; padding: 12px 14px; }

/* 🔎 DataBusca — resultado em BLOCOS por categoria (Paulo 21/08) */
.db-bloco-tit { margin: 20px 0 6px; font-size: 1.02rem; color: var(--primaria); border-bottom: 2px solid var(--acento); padding-bottom: 4px; display: inline-block; }
.db-sub th { background: var(--fundo); color: var(--texto-2); font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; padding: 6px 10px !important; }

/* 🔎 DataBusca — resultado INLINE (rolagem da página) + toggle Lista/Colunas + contador (Paulo 21/08) */
.db-contador { background: var(--fundo); border: 1px solid var(--borda); border-radius: 8px; padding: 8px 12px; margin: 10px 0; font-size: .9rem; color: var(--texto-2); display: inline-block; }
.db-contador b { color: var(--primaria); font-variant-numeric: tabular-nums; }
.db-admin-consultas { margin: 6px 0 4px; }
.db-admin-consultas > summary { cursor: pointer; font-weight: 600; color: var(--primaria); padding: 6px 0; }
/* bloco do resultado FIXO (sticky) na rolagem — título + toggle + identidade (nome/CPF), abaixo do
   header do app, pra saber de quem é o dado enquanto rola (Paulo 21/08) */
.db-res-fixo { position: sticky; top: var(--db-topo-off, 0px); z-index: 20; background: var(--fundo);
    padding: 8px 0 10px; margin-top: 12px; border-bottom: 2px solid var(--acento); }
.db-res-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.db-res-tit { margin: 0; font-size: 1.15rem; color: var(--primaria); }
.db-campos { display: flex; flex-direction: column; }               /* LISTA (padrão) */
.db-par { display: flex; justify-content: space-between; gap: 14px; padding: 8px 2px; border-bottom: 1px solid var(--borda); }
.db-par__lbl { color: var(--texto-2); }
.db-par__val { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.db-subh { font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; color: var(--texto-2); background: var(--fundo); padding: 6px 9px; margin: 8px 0 2px; border-radius: 6px; }
.db-res[data-layout="colunas"] .db-campos { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }  /* 2 COLUNAS */
.db-res[data-layout="colunas"] .db-subh { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .db-res[data-layout="colunas"] .db-campos { grid-template-columns: 1fr; }   /* mobile: 1 coluna */
}

/* 🕸️ DataBusca — grafo de relacionamentos + modal do DRILL empilhável (Paulo 21/08) */
.db-grafo-dica { font-weight: 400; font-size: .82rem; color: var(--texto-2); }
.db-grafo-wrap { overflow-x: auto; background: var(--branco); border: 1px solid var(--borda); border-radius: 12px; margin: 6px 0 14px; padding: 4px; }
.db-grafo { display: block; width: 100%; max-width: 720px; height: auto; margin: 0 auto; }
/* legenda dos ícones */
.db-grafo-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 2px 0 10px; font-size: .8rem; color: var(--texto-2); }
.db-grafo-legenda span { display: inline-flex; align-items: center; gap: 5px; }
.db-lg { width: 20px; height: 20px; flex-shrink: 0; }
/* ── círculo (SVG radial): arestas, ícones, rótulo FORA, grau na linha ── */
.db-aresta { stroke: #c9d2e0; stroke-width: 1.3; }
.db-rel { font-size: 10px; font-weight: 700; fill: #5b6b86; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.db-no-hit { fill: transparent; }
.db-centro-halo { fill: #fff; stroke: var(--acento); stroke-width: 3; }
.db-no-lbl { font-size: 12.5px; fill: #26324c; font-weight: 600; dominant-baseline: middle; font-family: 'Open Sans', sans-serif; }
.db-no-lbl--c { font-size: 13.5px; font-weight: 800; fill: var(--primaria); }
.db-no--drill { cursor: pointer; }
.db-no--drill:hover .db-no-hit { fill: rgba(224,123,62,.14); }
.db-no--drill:hover use { filter: brightness(1.08); }
.db-no--drill:focus { outline: none; }
.db-no--drill:focus .db-no-hit { fill: rgba(224,123,62,.20); stroke: var(--acento); stroke-width: 2; }
.db-grafo-mais { font-size: .85rem; color: var(--texto-2); margin: -6px 0 12px; }
/* lista clicável de relacionados/sócios (drill) */
.db-ents { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.db-ent-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; border: 1px solid var(--borda); background: var(--branco); border-radius: 999px; padding: 6px 12px; font-size: .84rem; color: var(--texto); cursor: pointer; }
.db-ent-chip small { color: var(--texto-2); }
.db-ent-chip:hover { border-color: var(--acento); background: #fff7f1; }
.db-ent-chip--pj { border-left: 3px solid var(--acento); }
.db-ent-chip--pf { border-left: 3px solid var(--primaria); }
/* cabeçalho DENTRO da barra fixa → nome/CPF/nasc/mãe pinados ao rolar */
.db-res-cab { min-width: 0; flex: 1; }
.db-res-cab .dt-vis-cab__nome { font-size: 1.05rem; color: var(--primaria); font-weight: 800; }
.db-res-cab .dt-vis-cab__linha { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: .82rem; color: var(--texto-2); margin-top: 2px; }
.db-cont-cab { color: var(--acento); font-weight: 700; background: #fff2e9; border-radius: 6px; padding: 1px 8px; }
.db-cont-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; vertical-align: middle; }
.db-cont-chips .db-ent-chip { padding: 2px 8px; font-size: .78rem; }
.db-drill-overlay { position: fixed; inset: 0; background: rgba(5,31,78,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.db-drill-box { background: var(--branco); border-radius: 14px; width: min(920px, 96vw); max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.4); overflow: hidden; }
.db-drill-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 18px; background: var(--primaria); color: #fff; }
.db-drill-tit { font-weight: 700; font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-modal-x { background: rgba(255,255,255,.16); color: #fff; border: 0; border-radius: 8px; width: 34px; height: 34px; cursor: pointer; font-size: 1rem; line-height: 1; flex-shrink: 0; }
.db-modal-x:hover { background: rgba(255,255,255,.32); }
.db-drill-corpo { overflow-y: auto; padding: 16px 20px 24px; }
@media (max-width: 640px) {
  .db-grafo { min-width: 640px; }                        /* rola de lado no celular (SVG largo) */
  .db-grafo-legenda { font-size: .74rem; gap: 4px 10px; }
  .db-drill-box { width: 100%; max-height: 96vh; border-radius: 10px; }
  .db-drill-corpo { padding: 12px 14px 20px; }
}