/* app/static/estilo.css */
/* Direção visual "Ledger Cívico" -- aprovada pelo usuário em protótipo (Artifact)
   antes de aplicar aqui. Newsreader (serifada, só títulos) + IBM Plex Sans
   (interface) + IBM Plex Mono (todo número: valores, CNPJ, datas, códigos).
   Azul institucional como base, bronze/latão como único destaque. */
:root {
    --paper: #eef1f6;
    --surface: #ffffff;
    --surface-2: #f6f8fb;
    --ink: #121d2b;
    --ink-soft: #51606f;
    --ink-faint: #8492a1;
    --line: #dbe1ea;
    --line-strong: #c3ccd9;
    --navy: #1c3d61;
    --navy-strong: #0e2338;
    --brass: #93602f;
    --brass-soft: #f2e6d3;
    --good: #276a4c;
    --good-soft: #e2f0e6;
    --warn: #a4761f;
    --warn-soft: #faf0da;
    --critical: #a63f3f;
    --critical-soft: #f8e3e0;
    --execucao-baixa: #cbe0f2;
    --header-bg: #0e2338;
    --header-ink: #eef1f6;
    --shadow: 0 1px 2px rgba(14, 35, 56, .06), 0 8px 24px rgba(14, 35, 56, .06);
    --radius: 10px;
    --radius-pequeno: 7px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper: #0c131c;
        --surface: #141e2b;
        --surface-2: #182333;
        --ink: #e8edf4;
        --ink-soft: #a7b4c4;
        --ink-faint: #718094;
        --line: #263346;
        --line-strong: #34445c;
        --navy: #6f9fce;
        --navy-strong: #0e2338;
        --brass: #d19b5e;
        --brass-soft: #2c2013;
        --good: #5cb98a;
        --good-soft: #12291f;
        --warn: #d9ac52;
        --warn-soft: #2c2413;
        --critical: #e08a7d;
        --critical-soft: #2c1715;
        --execucao-baixa: #24445e;
        --header-bg: #08131f;
        --header-ink: #e8edf4;
        --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 28px rgba(0, 0, 0, .35);
    }
}

* {
    box-sizing: border-box;
}

body {
    font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    line-height: 1.55;
}

.rotulo-numerica,
td, th, .valor, .cnpj, code {
    font-variant-numeric: tabular-nums;
}

header {
    background: var(--header-bg);
    color: var(--header-ink);
    padding: 0 2rem;
    display: flex;
    align-items: center;
    gap: 1.75rem;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 10;
}

header .marca-bloco {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .65rem 0;
}

header .marca {
    font-family: "Newsreader", Georgia, serif;
    font-weight: 600;
    font-size: 1.15rem;
    white-space: nowrap;
    letter-spacing: .01em;
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--header-ink);
    text-decoration: none;
}

header .marca:hover {
    opacity: .85;
}

header .creditos {
    font-size: .68rem;
    font-weight: 500;
    color: rgba(238, 241, 246, .55);
    letter-spacing: .02em;
    padding-left: 32px;
}

header .marca::before {
    content: "GP";
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--brass);
    color: var(--header-bg);
    font-family: "IBM Plex Mono", monospace;
    font-size: .68rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

header nav {
    display: flex;
    flex-wrap: wrap;
    /* Achado ao vivo (pedido do usuário, 2026-09-10): sem "flex: 1", nav só
       ocupa a largura do próprio conteúdo dentro do header (flex) -- o
       "margin-left: auto" de .nav-conta empurrava Admin/Sair só até a borda
       do NAV, não até a borda direita real da TELA, o que só ficava visível
       (e errado) em janelas mais largas que o conteúdo do menu. */
    flex: 1;
}

header nav a {
    color: rgba(238, 241, 246, .68);
    text-decoration: none;
    margin-right: .2rem;
    font-weight: 500;
    font-size: .88rem;
    padding: .55rem .8rem;
    border-radius: 7px;
    transition: color .15s, background-color .15s, box-shadow .15s;
}

header nav a:hover {
    color: var(--header-ink);
    background: rgba(255, 255, 255, .08);
}

header nav a.ativo {
    color: var(--header-ink);
    background: rgba(255, 255, 255, .1);
    box-shadow: inset 0 -2px 0 var(--brass);
}

/* Botão "Sair" (2026-09-09) -- mesmo tratamento visual dos links do nav
   (cor/hover), só que é um <button> dentro de <form> (POST /auth/sair não
   pode ser um <a>) -- por isso não reaproveita .botao-link, pensado pra
   fora do cabeçalho escuro. */
/* Pedido do usuário (2026-09-09): agrupa "Admin" (quando existe) e "Sair" e
   empurra os dois pro lado direito do header, separados dos links de
   conteúdo -- margin-left:auto num item de um flex container empurra ele
   (e tudo depois dele) até o fim da linha. */
.nav-conta {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-left: auto;
}

/* Identificação de quem está logado (pedido do usuário, 2026-09-10) --
   nome (ou email, se a conta for antiga e ainda não tiver nome_completo) +
   CPF, pra confirmar de relance qual conta está ativa. Só texto, sem link
   -- fonte monoespaçada só no CPF de propósito (é um número, o resto do
   app já usa mono só pra números/códigos, ver regra ".valor, .cnpj, code"). */
.nav-identificacao {
    color: rgba(238, 241, 246, .55);
    font-size: .78rem;
    white-space: nowrap;
}

.form-sair-nav {
    margin: 0;
    display: inline-flex;
}

.form-sair-nav button {
    background: none;
    border: none;
    color: rgba(238, 241, 246, .68);
    text-decoration: none;
    margin: 0;
    font-weight: 500;
    font-size: .88rem;
    padding: .55rem .8rem;
    border-radius: 7px;
    cursor: pointer;
    transition: color .15s, background-color .15s;
}

.form-sair-nav button:hover {
    color: var(--header-ink);
    background: rgba(255, 255, 255, .08);
}

main {
    padding: 2.5rem 2rem 4rem;
    max-width: 1480px;
    margin: 0 auto;
}

h1 {
    font-family: "Newsreader", Georgia, serif;
    font-weight: 600;
    font-size: 1.8rem;
    margin: 0 0 .4rem;
    text-wrap: balance;
}

h2 {
    font-family: "Newsreader", Georgia, serif;
    font-weight: 600;
    font-size: 1.3rem;
    margin: 2.4rem 0 1rem;
    color: var(--ink);
}

h3 {
    font-family: "Newsreader", Georgia, serif;
    font-weight: 600;
    font-size: 1.05rem;
    margin: 0 0 .5rem;
    color: var(--ink);
}

h4 {
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-faint);
    margin: 1.25rem 0 .5rem;
}

h1 + p,
h2 + p {
    color: var(--ink-soft);
}

main > p:first-of-type {
    color: var(--ink-soft);
    margin-top: 0;
}

a {
    color: var(--navy);
}

/* Navegação por Grupo/Classe/PDM/Item (Pesquisa de Preços) escondida da tela
   -- pedido do usuário (2026-09-07), código mantido morto pra reaproveitar
   quando entrar busca semântica. !important porque pesquisa_precos.js troca
   o style.display desses blocos ao alternar Material/Serviço -- sem isso,
   voltariam a aparecer no primeiro clique no radio. */
#bloco-material, #bloco-servico {
    display: none !important;
}

/* Achado ao vivo (pedido do usuário, 2026-09-10): sem largura/centralização
   próprias, um <fieldset> sempre ocupa 100% do "main" (até 1480px) --
   ótimo pra telas de dado (tabelas largas), péssimo pra uma caixa de
   consulta com 2-3 campos curtos (o mesmo problema já corrigido só nas
   telas de login/cadastro, ".quadro-central", agora estendido pra TODO
   fieldset do app -- Pesquisa de Preços, Alertas, Fornecedores,
   Contratações, PCA). Resultado (tabelas) fica FORA do fieldset em todas
   essas telas, então continua ocupando a largura toda normalmente. */
fieldset {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem 1.75rem 1.75rem;
    margin: 0 auto 1.5rem;
    max-width: 480px;
}

legend {
    /* "width: 100%" sozinho NÃO tira o <legend> do posicionamento especial
       nativo (testado ao vivo: o navegador ainda soma a altura inteira do
       texto acima da borda visível do <fieldset>, deixando as letras fora
       do quadro branco -- achado ao vivo, pedido do usuário 2026-09-06).
       "float: left" é o que de fato desliga esse algoritmo -- o <legend>
       passa a fluir como um bloco normal dentro do padding do fieldset. */
    float: left;
    width: 100%;
    font-family: "Newsreader", Georgia, serif;
    font-weight: 600;
    padding: 0 0 .75rem;
    color: var(--navy);
    font-size: 1.02rem;
}

label {
    display: block;
    font-weight: 600;
    font-size: .82rem;
    margin: 1.1rem 0 .35rem;
    color: var(--ink);
}

fieldset label:first-of-type,
form > label:first-of-type {
    margin-top: 0;
}

/* Indicador "?" de ajuda contextual, ao lado de um rótulo/legenda -- explica
   o mecanismo por trás do campo (passa o mouse ou dá Tab + foco pra ler),
   sem precisar de texto explicativo grudado no próprio rótulo (pedido do
   usuário, 2026-09-07). */
.ajuda {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    color: var(--ink-faint);
    font-size: .72rem;
    font-weight: 700;
    cursor: help;
    margin-left: .35rem;
    position: relative;
}

.ajuda:hover,
.ajuda:focus-visible {
    border-color: var(--navy);
    color: var(--navy);
}

/* Balão criado pelo ajuda.js a partir de data-ajuda -- some por padrão
   ([hidden], já suportado nativamente sem precisar de regra própria); some
   sozinho ao passar o mouse/focar, fixa aberto com um clique (ver JS). */
.ajuda-balao {
    position: absolute;
    top: calc(100% + .5rem);
    left: 0;
    z-index: 20;
    width: max-content;
    max-width: 260px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pequeno);
    box-shadow: var(--shadow);
    padding: .6rem .75rem;
    font-size: .8rem;
    font-weight: 400;
    line-height: 1.45;
    color: var(--ink-soft);
    text-align: left;
    white-space: normal;
    cursor: default;
}

input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="password"],
select {
    width: 100%;
    max-width: 420px;
    padding: .55rem .7rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pequeno);
    font-size: .95rem;
    background: var(--surface);
    color: var(--ink);
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}

input:focus,
select:focus {
    outline: none;
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(28, 61, 97, .15);
}

input:disabled,
select:disabled {
    background: var(--surface-2);
    color: var(--ink-faint);
    cursor: not-allowed;
}

fieldset p small,
form p small {
    color: var(--ink-soft);
}

button,
.botao {
    background: var(--navy);
    color: #fff;
    border: none;
    padding: .65rem 1.4rem;
    border-radius: var(--radius-pequeno);
    cursor: pointer;
    font-size: .9rem;
    font-weight: 600;
    display: inline-block;
    text-decoration: none;
    margin-top: 1.25rem;
    line-height: 1.3;
    transition: background-color .15s, transform .05s;
}

button:hover,
.botao:hover {
    background: var(--navy-strong);
}

button:active,
.botao:active {
    transform: translateY(1px);
}

button:disabled {
    background: var(--line);
    color: var(--ink-faint);
    cursor: not-allowed;
}

:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 2px;
}

table {
    border-collapse: collapse;
    width: 100%;
    background: var(--surface);
    font-size: .87rem;
}

th, td {
    border-bottom: 1px solid var(--line);
    padding: .65rem .75rem;
    text-align: left;
    /* Achado ao vivo (2026-09-07, pedido do usuário): sem isso, valores
       grandes (ex.: "R$ 11.869.950,54") quebravam em duas linhas quando a
       coluna ficava apertada -- o cabeçalho (th) já nunca quebra (regra
       abaixo), então td segue o mesmo padrão. Colunas de texto livre que
       precisam quebrar/truncar em vez de estourar a tabela já cuidam disso
       sozinhas (ver .objeto-compra, .celula-quebra-linha); o resto conta com
       a rolagem horizontal de .tabela-scroll. */
    white-space: nowrap;
    /* Pedido do usuário (2026-09-09): quando uma linha fica mais alta (ex.:
       coluna com quebra de linha ao lado de colunas de uma linha só), as
       outras células ficam centralizadas verticalmente em vez de coladas no
       topo. */
    vertical-align: middle;
}

th {
    background: var(--surface-2);
    color: var(--ink-faint);
    font-weight: 600;
    text-transform: uppercase;
    font-size: .7rem;
    letter-spacing: .06em;
    white-space: nowrap;
}

tbody tr:hover {
    background: var(--surface-2);
}

tbody tr:last-child td {
    border-bottom: none;
}

.urgencia-vermelho { background: var(--critical-soft); }
.urgencia-amarelo { background: var(--warn-soft); }
.urgencia-verde { background: var(--good-soft); }

/* Botão de expandir linha (drilldown) -- antes herdava o estilo genérico de
   "button" (pílula grande, preenchida) e o glifo ▶ renderizava como um
   triângulo grosso, parecendo um botão de "play" de vídeo (feedback do
   usuário em 2026-09-07). Ícone pequeno e discreto, com o mesmo glifo (›)
   sempre -- é a rotação que indica expandido/recolhido, não a troca de
   caractere (ver linha_expansivel.js). */
.botao-expandir {
    background: none;
    border: 1px solid var(--line-strong);
    color: var(--ink-soft);
    width: 1.7rem;
    height: 1.7rem;
    padding: 0;
    margin-top: 0;
    border-radius: 50%;
    font-size: .95rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, background-color .15s, color .15s, border-color .15s;
}

.botao-expandir:hover {
    background: var(--surface-2);
    color: var(--navy);
    border-color: var(--navy);
}

.botao-expandir[aria-expanded="true"] {
    transform: rotate(90deg);
    color: var(--navy);
    border-color: var(--navy);
}

/* Cabeçalho de coluna ordenável (ver tabela_ordenavel.js) -- colunas sem
   título (ex.: a do botão de expandir acima) nunca recebem
   "data-ordenavel", então não ficam clicáveis. */
th[data-ordenavel] {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 1.35rem;
}

th[data-ordenavel]:hover {
    color: var(--navy);
    background: var(--line);
}

th[data-ordenavel]::after {
    content: "";
    position: absolute;
    right: .55rem;
    top: 50%;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    opacity: .35;
}

th[data-ordenavel]:not([data-ordenado])::after {
    border-top: 5px solid var(--ink-faint);
    transform: translateY(-2px);
}

th[data-ordenavel][data-ordenado="asc"]::after {
    border-bottom: 5px solid var(--navy);
    opacity: 1;
    transform: translateY(-3px);
}

th[data-ordenavel][data-ordenado="desc"]::after {
    border-top: 5px solid var(--navy);
    opacity: 1;
    transform: translateY(-2px);
}

.tabela-scroll {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--navy) var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.tabela-scroll table {
    border-radius: 0;
}

.tabela-scroll::-webkit-scrollbar {
    height: 10px;
}

.tabela-scroll::-webkit-scrollbar-track {
    background: var(--surface-2);
    border-radius: 999px;
}

.tabela-scroll::-webkit-scrollbar-thumb {
    background: var(--navy);
    border-radius: 999px;
}

.tabela-controles {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-bottom: .5rem;
}

.tabela-controles button {
    margin-top: 0;
    padding: .3rem .9rem;
    font-size: .85rem;
}

.tabela-controles button:disabled {
    background: var(--line);
    cursor: default;
}

.objeto-compra {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pedido do usuário (2026-09-09, Alertas de Vencimento): "Objeto" tem texto
   livre comprido (descrição da contratação) -- diferente de .objeto-compra
   acima (trunca com "..."), aqui o pedido foi pra QUEBRAR em várias linhas
   dentro de uma largura fixa, sem esconder nada do texto. */
.celula-quebra-linha {
    max-width: 320px;
    white-space: normal;
}

/* Classificação de qualidade da ocorrência de preço (Pesquisa de Preços e
   Evolução histórica, pedido do usuário 2026-09-07) -- <select> compacto,
   direto na célula da tabela, que já salva sozinho ao trocar (sem botão
   "Salvar" separado, ver onchange="this.form.requestSubmit()" no template). */
.form-classificacao-preco {
    margin: 0;
}

.form-classificacao-preco select {
    max-width: 140px;
    padding: .3rem .5rem;
    font-size: .82rem;
}

/* Painel admin -- formulários curtos dentro de uma célula de tabela
   (redefinir senha, desativar/reativar acesso, pedido do usuário
   2026-09-10). */
.form-inline-admin {
    display: flex;
    gap: .5rem;
    margin: 0;
}

.form-inline-admin input {
    max-width: 140px;
}

.form-inline-admin button {
    margin-top: 0;
    white-space: nowrap;
}

/* Linha cuja ocorrência foi marcada como ruído -- discreta (não conta mais
   nos KPIs), mas sem sumir da tabela (transparência, mesmo espírito do
   "removido_deste_pca" no PCA). */
.linha-classificada-ruido {
    color: var(--ink-faint);
}

.linha-classificada-ruido td:not(:has(select)) {
    text-decoration: line-through;
    text-decoration-color: var(--line-strong);
}

.cnpj {
    display: block;
    color: var(--ink-faint);
    font-family: "IBM Plex Mono", monospace;
    font-size: .8em;
}

.badge-sustentavel, .badge-margem {
    display: inline-block;
    background: var(--good-soft);
    color: var(--good);
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    margin-right: .5rem;
}

.ficha-dfd {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .6rem 1.5rem;
    margin: 0 0 1rem;
    padding: .9rem 1rem;
    background: var(--surface-2);
    border-radius: var(--radius-pequeno);
}

.ficha-dfd dt {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-faint);
}

.ficha-dfd dd {
    margin: .15rem 0 0;
    font-size: .87rem;
    color: var(--ink);
}

/* Pedido do usuário (2026-09-06): várias compras costumam ser itens da mesma
   contratação -- esta barra agrupa visualmente os cartões abaixo dela (só
   aparece quando o grupo tem mais de 1 item) e carrega a ação em lote. */
.cabecalho-grupo-contratacao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .9rem;
    background: var(--surface-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pequeno);
    padding: .6rem .9rem;
    margin: 0 0 .5rem;
    font-size: .85rem;
}

.cabecalho-grupo-contratacao strong {
    color: var(--ink);
}

.cabecalho-grupo-contratacao span:not([class]) {
    color: var(--ink-soft);
}

.cabecalho-grupo-contratacao .form-inline-pca {
    margin: 0;
}

.cartao-execucao {
    border: 1px solid var(--line);
    border-radius: var(--radius-pequeno);
    padding: .9rem 1rem 1rem;
    margin: 0 0 .8rem;
}

.cartao-execucao-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .3rem .8rem;
    margin-bottom: .6rem;
}

.cartao-execucao-cabecalho strong {
    font-size: .92rem;
    color: var(--ink);
}

/* Achado ao vivo (2026-09-06): sem o ":not([class])", esta regra (0,1,1)
   tinha mais especificidade que ".badge-estimado"/".badge-confirmado"/
   ".badge-modalidade"/".badge-ano-duplicado" (0,1,0) sozinhas -- font-size e
   color de TODO badge dentro do cabeçalho ficavam sempre iguais (cinza,
   .82rem), nunca a cor/tamanho próprios definidos em cada ".badge-*". Só
   passava despercebido porque cinza x âmbar/verde é uma diferença sutil --
   ficou óbvio com ".badge-ano-duplicado" (texto branco virava invisível
   sobre o fundo vermelho). ":not([class])" restringe a regra genérica ao
   texto solto (nome do fornecedor, sem classe), sem tocar em nenhum badge. */
.cartao-execucao-cabecalho span:not([class]) {
    font-size: .82rem;
    color: var(--ink-soft);
}

.cartao-execucao .ficha-dfd {
    margin-bottom: .7rem;
}

.cartao-execucao .botao {
    margin-top: 0;
    padding: .4rem 1rem;
    font-size: .82rem;
}

/* Selo de UASG "importante" (pedido do usuário, 2026-09-09) -- usa o bronze
   (--brass), o único destaque da direção visual, porque aqui o destaque é
   literal: chamar atenção pras unidades de grande porte/relevância
   nacional na lista de UASGs (ver compras_sdk/importancia_uasgs.py). */
.badge-importante {
    display: inline-block;
    background: var(--brass-soft);
    color: var(--brass);
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
    margin-right: .3rem;
}

.valor-copiavel {
    font-family: "IBM Plex Mono", monospace;
}

.botao-copiar {
    background: none;
    border: 1px solid var(--line-strong);
    color: var(--ink-soft);
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    margin: 0 0 0 .35rem;
    border-radius: 50%;
    font-size: .8rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}

.botao-copiar:hover {
    background: var(--surface-2);
    color: var(--navy);
    border-color: var(--navy);
}

.badge-modalidade {
    display: inline-block;
    background: var(--surface-2);
    color: var(--ink-soft);
    border: 1px solid var(--line-strong);
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge-nao-previsto {
    display: inline-block;
    background: var(--warn-soft);
    color: var(--warn);
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge-estimado {
    display: inline-block;
    background: var(--warn-soft);
    color: var(--warn);
    border: 1px dashed var(--warn);
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Confirmação HUMANA (usuário leu um documento oficial e corrigiu/confirmou
   -- ver compras_sdk/overrides.py) -- borda sólida (não tracejada, ao
   contrário de .badge-estimado) porque é mais confiável que uma estimativa
   automática: alguém checou o dado de verdade, não é um palpite. */
.badge-confirmado {
    display: inline-block;
    background: var(--good-soft);
    color: var(--good);
    border: 1px solid var(--good);
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

.form-override-classificacao {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--line);
}

.form-override-classificacao label {
    font-size: .8rem;
    color: var(--ink-soft);
    white-space: nowrap;
}

.form-override-classificacao input[type="text"] {
    width: 110px;
}

/* Pedido do usuário (2026-09-06): compra contada em dois anos de PCA (a busca do
   executado cobre o ano consultado E o seguinte -- ver app/services/pca.py) --
   "!" precisa chamar mais atenção que os badges informativos acima, por isso
   usa a cor crítica (mesma de ".erro") em vez de ".badge-*" com --warn. */
.badge-ano-duplicado {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    background: var(--critical);
    color: #fff;
    border-radius: 50%;
    font-size: .78rem;
    font-weight: 700;
    cursor: help;
}

.aviso-removido-pca {
    color: var(--critical);
    font-size: .82rem;
    font-style: italic;
    margin: .4rem 0 0;
}

.form-inline-pca {
    display: inline-block;
    margin: .75rem 0 0 .6rem;
}

.botao-link {
    background: none;
    border: 1px solid var(--line-strong);
    color: var(--navy);
    padding: .35rem .9rem;
    font-size: .8rem;
    font-weight: 600;
    margin-top: 0;
}

.botao-link:hover {
    background: var(--surface-2);
}

.erro, .aviso {
    border-radius: var(--radius-pequeno);
    padding: .75rem 1rem;
    margin: 0 0 1.25rem;
    font-size: .92rem;
}

.erro {
    background: var(--critical-soft);
    color: var(--critical);
}

.aviso {
    background: var(--warn-soft);
    color: var(--warn);
}

/* Disclosure nativo (<details>) explicando em linguagem simples como o
   cruzamento planejado × executado é feito -- pedido do usuário
   (2026-09-07), fechado por padrão pra não poluir a tela de quem já conhece
   o mecanismo. */
.explicacao-cruzamento {
    margin: 0 0 1.3rem;
}

.explicacao-cruzamento > summary {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    color: var(--navy);
    font-size: .87rem;
    font-weight: 600;
    list-style: none;
}

.explicacao-cruzamento > summary::-webkit-details-marker {
    display: none;
}

.explicacao-cruzamento > summary::before {
    content: "i";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border: 1px solid var(--navy);
    border-radius: 50%;
    font-size: .72rem;
    font-style: italic;
    font-family: "Newsreader", Georgia, serif;
    flex-shrink: 0;
}

.explicacao-cruzamento[open] > summary {
    margin-bottom: .7rem;
}

.explicacao-cruzamento-conteudo {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-pequeno);
    padding: 1rem 1.2rem;
    font-size: .87rem;
    color: var(--ink-soft);
    max-width: 68ch;
}

.explicacao-cruzamento-conteudo p:last-child {
    margin-bottom: 0;
}

.estatistica {
    display: inline-block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.1rem 1.6rem;
    margin: 0 .6rem .6rem 0;
}

.estatistica .rotulo {
    display: block;
    color: var(--ink-faint);
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .35rem;
}

.estatistica .valor {
    display: block;
    font-family: "IBM Plex Mono", monospace;
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--navy);
}

/* Grupo "Contratações por modalidade" (PCA) -- pedido do usuário
   (2026-09-10): rótulos de tamanhos bem diferentes (ex. "Concorrência -
   Eletrônica" x "Dispensa") deixavam os cartões com larguras desiguais e
   "feios" -- min-width iguala todos ao mesmo tamanho, mantendo o grupo à
   esquerda (mesmo alinhamento dos 3 cartões principais, Planejado/
   Executado/Execução, logo acima -- rascunho aprovado pelo usuário mostrou
   o grupo alinhado à esquerda, não centralizado na tela). */
.grupo-modalidades {
    margin-bottom: 1.5rem;
}

.cartoes-modalidades {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}

.cartoes-modalidades .estatistica {
    margin: 0;
    min-width: 160px;
}

/* ---- gráfico de barra horizontal (top fornecedores, categorias PCA) ---- */
.painel-grafico {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.4rem 1.5rem 1.1rem;
    margin: 0 0 1.5rem;
    overflow-x: auto;
}

.barra-linha {
    display: grid;
    grid-template-columns: minmax(140px, 230px) 1fr auto;
    align-items: center;
    gap: .8rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--line);
}

.barra-linha:last-child {
    border-bottom: none;
}

.barra-nome {
    font-size: .82rem;
    color: var(--ink);
}

.barra-trilho {
    position: relative;
    height: 18px;
    background: var(--surface-2);
    border-radius: 4px;
    background-image: linear-gradient(to right, var(--line) 1px, transparent 1px);
    background-size: 25% 100%;
}

.barra-preenchida {
    position: absolute;
    inset: 0;
    width: var(--pct, 0%);
    border-radius: 4px;
    background: var(--navy);
}

.barra-linha:first-child .barra-preenchida {
    background: var(--brass);
}

.barra-valor {
    font-family: "IBM Plex Mono", monospace;
    font-size: .78rem;
    text-align: right;
    color: var(--ink-soft);
    white-space: nowrap;
}

/* Pedido do usuário (2026-09-06): "Top fornecedores" mostrava só os 8
   primeiros -- virou lista ROLANTE com TODOS os fornecedores (não só top 8),
   mas com altura máxima fixa (scroll interno) pra não estourar o tamanho da
   página quando há uma centena deles. */
.painel-grafico-rolante {
    max-height: 420px;
    overflow-y: auto;
}

/* Ranking de execução por categoria do PCA (pedido do usuário, 2026-09-07) --
   diferente do ranking de top fornecedores acima (só posição, cor fixa), aqui
   a cor precisa refletir o NÍVEL de execução -- não só "ultrapassou ou não"
   (binário), mas uma escala contínua de intensidade: azul claro (pouco
   usado) até vermelho (ultrapassou o planejado), passando por tons
   intermediários conforme a categoria se aproxima de 100%. `--pct` (já usado
   pra largura da barra, sempre 0-100% mesmo quando o valor real passa de
   100%) alimenta direto o color-mix -- uma fonte só pro dado, sem duplicar a
   lógica de "acima do planejado" numa classe à parte. Também neutraliza o
   destaque dourado do primeiro item (herdado de ".barra-linha:first-child"
   acima), que aqui não faz sentido -- especificidade maior (4 classes, não
   empatando com ".barra-linha:first-child .barra-preenchida" acima) garante
   isso mesmo sendo o primeiro da lista, sem depender de ordem no arquivo. */
.painel-grafico-execucao .painel-grafico-rolante .barra-linha .barra-preenchida {
    background: color-mix(in srgb, var(--critical) var(--pct, 0%), var(--execucao-baixa));
}

.painel-grafico-execucao .barra-valor.valor-acima-do-planejado {
    color: var(--critical);
    font-weight: 600;
}

/* Barrinha mini de execução, dentro da própria célula da tabela detalhada de
   categorias do PCA -- reforça o mesmo sinal do ranking acima (seção
   .painel-grafico-execucao), mas linha a linha, sem precisar rolar até lá.
   Compacta de propósito (trilho de 60px) pra caber numa célula de tabela,
   diferente da .barra-* usada no ranking (pensada pro layout largo em grid). */
.execucao-mini {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}

.execucao-mini-trilho {
    position: relative;
    width: 60px;
    height: 8px;
    flex-shrink: 0;
    background: var(--surface-2);
    border-radius: 4px;
}

.execucao-mini-preenchida {
    position: absolute;
    inset: 0;
    width: var(--pct, 0%);
    border-radius: 4px;
    /* Mesma escala de intensidade do ranking acima (azul claro -> vermelho
       conforme --pct sobe) -- ver comentário em .painel-grafico-execucao. */
    background: color-mix(in srgb, var(--critical) var(--pct, 0%), var(--execucao-baixa));
}

.execucao-mini-valor {
    font-family: "IBM Plex Mono", monospace;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.execucao-mini-valor.execucao-mini-valor-acima {
    color: var(--critical);
    font-weight: 600;
}

/* Gráfico de linha (série temporal, ex.: evolução de preço) -- diferente de
   .barra-* acima (ranking em barra horizontal), aqui o eixo X é tempo, não
   um ranking, então precisa de coordenadas x/y calculadas (ver
   app/services/grafico_evolucao.py), não uma largura percentual simples. */
.grafico-linha {
    width: 100%;
    height: auto;
    display: block;
}

/* Retângulo de fundo dentro do próprio SVG -- sem isso, exportar o gráfico
   pra PNG (ver baixar_grafico.js) resultaria num fundo transparente que
   alguns visualizadores compõem como preto, em vez de branco/tema (achado
   ao vivo, pedido do usuário 2026-09-07). */
.grafico-linha-fundo {
    fill: var(--surface);
}

.grafico-linha-serie {
    fill: none;
    stroke: var(--navy);
    stroke-width: 2;
    stroke-linejoin: round;
}

.grafico-linha-ponto {
    fill: var(--surface);
    stroke: var(--navy);
    stroke-width: 2;
}

.grafico-linha-grade {
    stroke: var(--line);
    stroke-dasharray: 3 4;
}

.grafico-linha-rotulo {
    font-family: "IBM Plex Mono", monospace;
    font-size: 10px;
    fill: var(--ink-faint);
}

.grafico-linha-eixo {
    text-align: center;
    color: var(--ink-faint);
    margin: .3rem 0 0;
}

.grade-ferramentas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.grade-ferramentas li {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.3rem 1.4rem 1.5rem;
    transition: box-shadow .15s, transform .15s;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

/* Pedido do usuário (2026-09-06): clicar em qualquer parte do card leva pro
   painel, não só no texto do link. Padrão "stretched link" -- o link real
   continua só no texto (mantém semântica/acessibilidade normal, leitor de
   tela lê só um link por card), mas um pseudo-elemento seu cobre o cartão
   inteiro (via position:absolute + inset:0, ancorado no position:relative
   do <li> acima) e captura o clique em qualquer ponto. */
.grade-ferramentas .link-cartao-inteiro::after {
    content: "";
    position: absolute;
    inset: 0;
}

.grade-ferramentas li:hover {
    box-shadow: 0 8px 20px rgba(14, 35, 56, .12);
    transform: translateY(-2px);
}

.grade-ferramentas .icone-ferramenta {
    width: fit-content;
    min-width: 30px;
    height: 24px;
    padding: 0 .4rem;
    border-radius: 6px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "IBM Plex Mono", monospace;
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--brass);
}

.grade-ferramentas a {
    font-size: 1.02rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--ink);
}

.grade-ferramentas a:hover {
    color: var(--navy);
    text-decoration: underline;
}

.grade-ferramentas p {
    margin: 0;
    color: var(--ink-soft);
    font-size: .87rem;
    line-height: 1.55;
}

.link-voltar {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--ink-soft);
    text-decoration: none;
}

.link-voltar:hover {
    color: var(--navy);
}

/* Sub-navegação entre as páginas do painel admin (Usuários/Overrides/
   Reports) -- achado ao vivo (2026-09-10, mesma classe de bug do link
   "Admin" que faltava na nav principal antes): nenhuma delas linkava pras
   outras, só alcançáveis digitando a URL. */
.subnav-admin {
    display: flex;
    gap: .3rem;
    margin: -.5rem 0 1.8rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: .1rem;
}

.subnav-admin a {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: .87rem;
    font-weight: 600;
    padding: .5rem .9rem;
    border-radius: var(--radius-pequeno) var(--radius-pequeno) 0 0;
}

.subnav-admin a:hover {
    background: var(--surface-2);
    color: var(--navy);
}

.subnav-admin a.ativo {
    color: var(--navy);
    box-shadow: inset 0 -2px 0 var(--brass);
}

.rodape {
    text-align: center;
    color: var(--ink-faint);
    font-size: .82rem;
    padding: 2rem 2rem 3rem;
}

.rodape p {
    margin: 0 0 .3rem;
}

.rodape p:last-child {
    margin-bottom: 0;
    font-size: .76rem;
    opacity: .8;
}

/* ---- indicador de carregamento (form submit -> navegação) ---- */
.overlay-carregando {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}

.overlay-carregando.visivel {
    opacity: 1;
    pointer-events: all;
}

.overlay-carregando .cartao {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: .8rem;
    font-size: .92rem;
    color: var(--ink-soft);
}

.overlay-carregando .spinner {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2.5px solid var(--line);
    border-top-color: var(--brass);
    animation: girar .7s linear infinite;
    flex-shrink: 0;
}

/* Exportação de PDF/Excel que falhou (ex.: erro real da API) -- mesmo overlay,
   mas sem girar (não é mais "carregando") e com aviso em vermelho, mesma cor
   de ".erro" usada no resto do app. */
.overlay-carregando.erro .spinner {
    animation: none;
    border-color: var(--critical-soft);
    border-top-color: var(--critical);
}

.overlay-carregando.erro .overlay-carregando-texto {
    color: var(--critical);
}

/* Confirmação de "Fale comigo" enviado (2026-09-10) -- mesmo overlay,
   parado (não é mais "carregando") e em verde, mesma cor de ".aviso"
   positivo/".good" usada no resto do app. */
.overlay-carregando.sucesso .spinner {
    animation: none;
    border-color: var(--good-soft);
    border-top-color: var(--good);
}

.overlay-carregando.sucesso .overlay-carregando-texto {
    color: var(--good);
}

@media (prefers-reduced-motion: reduce) {
    .overlay-carregando .spinner {
        animation: none;
    }
}

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

@media print {
    /* Achado ao vivo (2026-09-01, PDF do usuário): "position: sticky" no header
       se comporta mal em paginação de impressão/print-to-PDF -- o header
       reaparecia duplicado no meio do conteúdo em vez de só no topo de cada
       página. "static" evita o bug: imprime uma vez só, no topo do documento. */
    header {
        position: static;
    }

    .overlay-carregando {
        display: none;
    }
}

@media (max-width: 640px) {
    header {
        padding: 0 1rem;
    }

    main {
        padding: 1.5rem 1rem 3rem;
    }

    fieldset {
        padding: 1.1rem 1.25rem 1.4rem;
    }

    .barra-linha {
        grid-template-columns: 110px 1fr auto;
    }
}

/* Menu hambúrguer mobile (2026-09-11, pedido do usuário -- "não pensamos nos
   usuários pelo celular") -- breakpoint próprio (768px), diferente do
   @media (max-width: 640px) acima (aquele é só ajuste de espaçamento, não
   mexe em navegação). Ver docs/superpowers/specs/2026-09-11-responsividade-
   mobile-fundacao-design.md. */
.botao-menu-mobile {
    display: none;
    background: none;
    border: none;
    color: var(--header-ink);
    font-size: 1.5rem;
    line-height: 1;
    padding: .3rem .5rem;
    cursor: pointer;
    position: relative;
    margin-left: auto;
}

@media (max-width: 768px) {
    .botao-menu-mobile {
        display: inline-flex;
        align-items: center;
    }

    header nav {
        display: none;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: .2rem;
    }

    header nav.aberto {
        display: flex;
    }

    .nav-conta {
        margin-left: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: .5rem;
        padding-top: .5rem;
        border-top: 1px solid rgba(238, 241, 246, .15);
    }

    fieldset input[type="text"],
    fieldset input[type="email"],
    fieldset input[type="password"],
    fieldset input[type="number"],
    fieldset input[type="date"],
    fieldset select {
        font-size: 16px;
        min-height: 2.75rem;
    }

    .tabela-scroll table,
    .tabela-scroll thead,
    .tabela-scroll tbody,
    .tabela-scroll tr,
    .tabela-scroll td {
        display: block;
        width: 100%;
    }

    .tabela-scroll thead {
        display: none;
    }

    .tabela-scroll tbody tr {
        background: var(--surface);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        padding: .75rem 1rem;
        margin-bottom: .75rem;
    }

    .tabela-scroll td {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: .1rem .75rem;
        text-align: right;
        padding: .3rem 0;
        /* Sobrescreve "th, td { white-space: nowrap }" (regra pro modo
           desktop, que conta com rolagem horizontal em vez de quebrar linha)
           -- achado ao vivo (2026-09-11): sem isso, valores longos (ex.:
           razão social) ficavam cortados pela borda da tela em vez de
           quebrar dentro do cartão. */
        white-space: normal;
    }

    .tabela-scroll td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--ink-soft);
        text-align: left;
        flex-shrink: 0;
    }

    .tabela-scroll td.campo-secundario {
        display: none;
    }

    .tabela-scroll tr.cartao-expandido td.campo-secundario {
        display: flex;
    }

    /* Achado ao vivo (2026-09-11): ".tabela-scroll td { display: flex }"
       acima foi pensado pra célula simples de par label:valor -- mas a
       célula de detalhe do PCA (colspan=5) guarda conteúdo rico (ficha-dfd,
       tabela de itens planejados, vários ".cartao-execucao") sem
       "data-label" nenhum. Virando flex item, cada bloco filho passava a
       ser dimensionado pelo próprio conteúdo (max-content) em vez de
       ocupar 100% da largura, estourando a tela sem quebra visível. */
    .tabela-scroll td.celula-detalhe-pca {
        display: block;
        text-align: left;
    }

    .campo-acao-mobile {
        display: block;
        text-align: center;
        margin-top: .5rem;
    }

    select.ordenar-mobile {
        display: block;
        width: 100%;
        margin-bottom: 1rem;
        font-size: 16px;
        min-height: 2.75rem;
    }

    .urgencia-vermelho { border-left: 4px solid var(--critical); }
    .urgencia-amarelo { border-left: 4px solid var(--warn); }
    .urgencia-verde { border-left: 4px solid var(--good); }

    .subnav-admin {
        flex-wrap: wrap;
    }

    /* Achado ao vivo (2026-09-11, passeio completo pelo app no celular):
       ".ajuda-balao" (regra base) ancora pela borda esquerda do ÍCONE
       ("left: 0" relativo ao ".ajuda", que é o "position: relative" mais
       próximo) e cresce até 260px pra direita -- no desktop sempre há
       espaço de sobra, mas num cartão de ~340px com o ícone perto do
       meio (ex.: "Consulta direta ?"), o balão vazava pra fora da tela
       à direita, cortando o fim do texto. Centralizar no ícone (em vez
       de crescer só pra um lado) e reduzir a largura mantém o balão
       dentro do cartão nos casos observados (ícones sempre no terço
       esquerdo/central de cada tela, nunca perto da borda direita). */
    .ajuda-balao {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        max-width: 200px;
    }

    /* Achado ao vivo (2026-09-11): estes badges levam frases inteiras, não
       rótulos curtos (ex.: ".badge-nao-previsto" = "Item específico não
       previsto neste Id Contratação Futura") -- "white-space: nowrap" (regra
       base, pensada pro espaço largo do desktop) estourava a largura do
       cartão sem quebrar linha nenhuma. */
    .badge-modalidade,
    .badge-nao-previsto,
    .badge-estimado,
    .badge-confirmado {
        white-space: normal;
    }
}

/* Cartões mobile nas telas de resultado (2026-09-11, sub-projeto 2 da
   responsividade -- ver docs/superpowers/specs/2026-09-11-responsividade-
   mobile-telas-simples-design.md). Fora do breakpoint mobile (regra dentro
   do @media acima), estes elementos não existem visualmente -- só a
   tabela normal aparece, igual sempre apareceu. */
.campo-acao-mobile,
select.ordenar-mobile {
    display: none;
}

/* Telas de consulta (login/cadastro e as 5 telas de busca -- Alertas,
   Pesquisa de Preços, PCA, Contratações, Fornecedores) (pedido do usuário,
   2026-09-10): centralizar só o <fieldset> (ver regra "fieldset" acima)
   deixava o título desalinhado -- <h1> continuava esticado a 100% da
   largura de "main" (até 1480px), à esquerda, enquanto a caixa do
   formulário abaixo dele ficava centralizada e bem mais estreita, um
   deslocamento visual entre os dois. Esta classe agrupa título (+ parágrafo
   de erro/intro, quando existe) e fieldset(s) num único bloco estreito com
   margem automática, pra que o título e a caixa comecem na mesma borda
   esquerda e o conjunto inteiro fique centralizado como uma unidade só --
   igual ao padrão original das telas de login/cadastro, agora estendido. */
.quadro-central {
    max-width: 440px;
    margin: 2rem auto 0;
}

.quadro-central fieldset {
    margin-bottom: 1.2rem;
}

/* Botão flutuante "Reportar problema" (Task 19, 2026-09-09) -- só aparece
   logado (ver o if em base.html), em toda tela. */
.botao-reportar {
    position: fixed;
    bottom: 1.2rem;
    right: 1.2rem;
    z-index: 50;
    background: var(--navy);
    color: var(--header-ink);
    border: none;
    border-radius: 999px;
    padding: .7rem 1.2rem;
    font-family: "IBM Plex Sans", sans-serif;
    cursor: pointer;
    box-shadow: var(--shadow);
}

/* Contador de mensagens novas (2026-09-11, pedido do usuário) -- admin (link
   "Admin" na nav) e usuário comum (botão "Fale comigo"), ver base.html. Cor
   crítica (mesma de ".erro"/urgência vermelha de Alertas) -- é sempre uma
   chamada de atenção, nunca decorativo. */
.contador-notificacao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--critical);
    color: #fff;
    font-family: "IBM Plex Mono", monospace;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1;
}

/* .botao-reportar já é "position: fixed" -- isso sozinho já serve de
   containing block pro filho absoluto, sem precisar de position:relative
   extra. */
.contador-flutuante {
    position: absolute;
    top: -.4rem;
    right: -.4rem;
    box-shadow: 0 0 0 2px var(--navy);
}

.modal-reportar {
    position: fixed;
    inset: 0;
    background: rgba(14, 35, 56, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 60;
}

/* Achado ao vivo (Task 26): ".modal-reportar[hidden]" tem mais especificidade
   (0,2,0) que ".modal-reportar" sozinho (0,1,0) -- sem esta regra, o
   "display: flex" acima empata em especificidade com o "[hidden] { display:
   none }" nativo do navegador, e regra do autor sempre vence esse empate
   contra o stylesheet nativo. Resultado: o modal ficava permanentemente
   visível, cobrindo a tela inteira, pra QUALQUER usuário logado -- o atributo
   "hidden" (alternado por base.html) nunca tinha efeito nenhum. */
.modal-reportar[hidden] {
    display: none;
}

.modal-reportar form {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    max-width: 480px;
    width: 90%;
}

.modal-reportar form h3 {
    margin: 0;
}

/* Achado ao vivo (pedido do usuário, 2026-09-10): a caixa de mensagem
   estava pequena demais pra um relato de verdade -- rows="7" (markup) já
   ajuda, mas sem "resize" o usuário não consegue aumentar mais se
   precisar, e sem "min-height" alguns navegadores ignoram "rows" com o
   CSS reset de fontes desta página. */
.modal-reportar textarea {
    min-height: 9rem;
    resize: vertical;
    font-family: inherit;
}

/* Sem isto, os dois botões abaixo herdam "align-items: stretch" do
   flex-column do form acima e ficam esticados pra 100% da largura,
   enormes e empilhados -- pedido do usuário (2026-09-10), print
   mostrando exatamente esse problema. */
.modal-reportar-acoes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
}

.modal-reportar-botoes {
    display: flex;
    gap: .6rem;
}

.modal-reportar-acoes button {
    margin-top: 0;
}

/* "Fale comigo" virou uma thread de verdade (pedido do usuário, 2026-09-10):
   admin_reports.html (resposta do NEO) e minhas_mensagens.html (o usuário
   comum vendo a própria mensagem + resposta) reaproveitam o mesmo cartão. */
.cartao-report {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.1rem 1.3rem;
    margin: 0 0 1rem;
}

.resposta-admin {
    margin-top: .8rem;
    padding: .8rem 1rem;
    background: var(--surface-2);
    border-left: 3px solid var(--navy);
    border-radius: var(--radius-pequeno);
}

.resposta-admin-rotulo {
    margin: 0 0 .3rem;
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-faint);
}

.resposta-admin p:last-child {
    margin-bottom: 0;
}

.form-responder-report {
    margin-top: .8rem;
    max-width: 480px;
}

.form-responder-report textarea {
    width: 100%;
    min-height: 5rem;
    resize: vertical;
    font-family: inherit;
}

.aviso-aguardando-resposta {
    margin-top: .6rem;
    font-size: .84rem;
    color: var(--ink-faint);
    font-style: italic;
}