/* CONTRATOS — estilos */
:root {
    --fundo: #f4f6f9;
    --superficie: #ffffff;
    --borda: #dfe3ea;
    --texto: #1c2430;
    --texto-2: #4a5566;
    --mudo: #6b7686;
    --primaria: #1f5fae;
    --primaria-texto: #ffffff;
    --barra: #2a78d6;
    --trilho: #e8edf4;
    --ok-fundo: #e3f5ec; --ok-texto: #13693f;
    --alerta-fundo: #fff3d6; --alerta-texto: #7a5300;
    --erro-fundo: #fde6e6; --erro-texto: #9b1c1c;
    --neutro-fundo: #edf0f4; --neutro-texto: #4a5566;
    --raio: 8px;
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root {
        --fundo: #12161c;
        --superficie: #1b2129;
        --borda: #2e3743;
        --texto: #e6eaf0;
        --texto-2: #b9c2ce;
        --mudo: #8e99a8;
        --primaria: #4b8fe0;
        --barra: #4b8fe0;
        --trilho: #26303b;
        --ok-fundo: #163527; --ok-texto: #7fd8a8;
        --alerta-fundo: #3a2e10; --alerta-texto: #f1c867;
        --erro-fundo: #3d1a1a; --erro-texto: #f3a3a3;
        --neutro-fundo: #26303b; --neutro-texto: #b9c2ce;
        color-scheme: dark;
    }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--primaria); }
h1 { font-size: 1.5rem; margin: 0 0 12px; }
h2 { font-size: 1.05rem; margin: 0 0 10px; }
small { font-weight: normal; font-size: .9rem; }
.mudo { color: var(--mudo); font-size: .88rem; }
.nowrap { white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.link-discreto { color: inherit; text-decoration: none; }
.link-discreto:hover { text-decoration: underline; }

/* topo */
.topo { display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: var(--superficie); border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 5; }
.marca { font-weight: 700; font-size: 1.1rem; color: var(--texto); text-decoration: none; }
.menu { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.menu a, .menu button { padding: 6px 10px; border-radius: 6px; color: var(--texto-2); text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; }
.menu a:hover, .menu button:hover { background: var(--neutro-fundo); }
.menu a.ativo { background: var(--primaria); color: var(--primaria-texto); }
.menu .sair { margin: 0; }
.menu-botao { display: none; margin-left: auto; background: none; border: 1px solid var(--borda); border-radius: 6px; font-size: 1.2rem; padding: 2px 10px; color: var(--texto); }
@media (max-width: 760px) {
    .menu-botao { display: block; }
    .menu { display: none; width: 100%; flex-direction: column; align-items: stretch; }
    .menu.aberto { display: flex; }
    .topo { flex-wrap: wrap; }
}

.conteudo { max-width: 1280px; margin: 0 auto; padding: 20px 16px 48px; }
.titulo-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.titulo-linha h1, .titulo-linha h2 { margin: 0; }
.botoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* botões e formulários */
.botao { display: inline-block; padding: 8px 14px; border-radius: 6px; border: 1px solid var(--primaria); background: var(--primaria); color: var(--primaria-texto); font: inherit; text-decoration: none; cursor: pointer; white-space: nowrap; }
.botao:hover { filter: brightness(1.08); }
.botao-leve { background: var(--superficie); color: var(--primaria); border-color: var(--borda); }
input, select, textarea { font: inherit; color: var(--texto); background: var(--superficie); border: 1px solid var(--borda); border-radius: 6px; padding: 7px 9px; width: 100%; }
input[type=checkbox], input[type=radio] { width: auto; }
input[type=file] { width: auto; max-width: 100%; }
label { display: flex; flex-direction: column; gap: 4px; font-size: .88rem; color: var(--texto-2); }
label.opcao { flex-direction: row; align-items: center; gap: 8px; font-size: .95rem; color: var(--texto); margin: 6px 0; }
.form-coluna { display: flex; flex-direction: column; gap: 12px; max-width: 460px; }
fieldset { border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 16px; margin: 0 0 12px; }

.filtros { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px; margin-bottom: 14px; }
.busca-linha, .busca-rapida { display: flex; gap: 8px; }
.busca-rapida { margin-bottom: 16px; }
.busca-linha .filtro-orgao { width: auto; max-width: 38%; flex: 0 1 auto; font-weight: 600; color: var(--primaria); }
@media (max-width: 560px) {
    .busca-linha { flex-wrap: wrap; }
    .busca-linha .filtro-orgao { max-width: none; flex-basis: 100%; }
    .busca-linha input[type=search] { flex: 1; min-width: 0; }
}
.filtros details { margin-top: 10px; }
.filtros summary { cursor: pointer; color: var(--primaria); font-size: .92rem; }
.grade-filtros { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 12px; margin-top: 12px; }
.acoes-filtros { display: flex; gap: 8px; margin-top: 12px; }
.ordenacao { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; }
.ordenacao label { flex-direction: row; align-items: center; gap: 6px; }
.ordenacao select { width: auto; }
th a.ordena { color: inherit; text-decoration: none; white-space: nowrap; }
th a.ordena:hover { color: var(--primaria); text-decoration: underline; }
th a.ordena.ativa { color: var(--primaria); }
.multi { max-width: 420px; }

/* avisos e selos */
.aviso { padding: 10px 14px; border-radius: var(--raio); margin-bottom: 12px; }
.aviso-ok { background: var(--ok-fundo); color: var(--ok-texto); }
.aviso-alerta { background: var(--alerta-fundo); color: var(--alerta-texto); }
.aviso-erro { background: var(--erro-fundo); color: var(--erro-texto); }
.selo { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.selo-vigente { background: var(--ok-fundo); color: var(--ok-texto); }
.selo-alerta { background: var(--alerta-fundo); color: var(--alerta-texto); }
.selo-vencido { background: var(--erro-fundo); color: var(--erro-texto); }
.selo-neutro { background: var(--neutro-fundo); color: var(--neutro-texto); }
.selo-orgao { background: transparent; color: var(--primaria); box-shadow: inset 0 0 0 1px var(--primaria); letter-spacing: .02em; }
.resumo .orgaos { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.vazio { background: var(--superficie); border: 1px dashed var(--borda); border-radius: var(--raio); padding: 28px; text-align: center; color: var(--mudo); }

/* cards e quadros */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.card { display: flex; flex-direction: column; gap: 2px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px; color: var(--texto); text-decoration: none; }
a.card:hover { border-color: var(--primaria); }
.card-rotulo { font-size: .85rem; color: var(--texto-2); }
.card-valor { font-size: 1.55rem; font-variant-numeric: tabular-nums; }
.card-sub { font-size: .82rem; color: var(--mudo); }
.quadros { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 14px; margin-bottom: 14px; }
.quadro { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px; margin-bottom: 14px; }
.quadros .quadro { margin-bottom: 0; }
.mais { display: inline-block; margin-top: 10px; font-size: .88rem; }
.resumo { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 10px 14px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); margin-bottom: 12px; color: var(--texto-2); }
.resumo strong { color: var(--texto); font-variant-numeric: tabular-nums; }

/* barras (uma série, uma cor) */
.barras { display: flex; flex-direction: column; gap: 2px; }
.b-linha { display: grid; grid-template-columns: minmax(90px, 38%) 1fr auto; align-items: center; gap: 10px; padding: 4px 6px; border-radius: 6px; color: var(--texto); text-decoration: none; font-size: .88rem; }
a.b-linha:hover { background: var(--neutro-fundo); }
.b-rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-trilho { display: inline-block; width: 100%; height: 10px; background: var(--trilho); border-radius: 4px; overflow: hidden; vertical-align: middle; }
.b-barra { display: block; height: 100%; background: var(--barra); border-radius: 0 4px 4px 0; }
.b-ponta { color: var(--texto-2); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .85rem; }
.col-barra { min-width: 160px; white-space: nowrap; }
.col-barra .b-trilho { width: 110px; }

/* tabelas */
.rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; background: var(--superficie); font-size: .9rem; }
.tabela th, .tabela td { padding: 8px 10px; border-bottom: 1px solid var(--borda); text-align: left; vertical-align: top; }
.tabela thead th { font-size: .8rem; color: var(--texto-2); text-transform: uppercase; letter-spacing: .02em; background: var(--superficie); }
.tabela th.num, .tabela td.num { text-align: right; }
.tabela tfoot th { border-top: 2px solid var(--borda); }
.tabela tbody tr:hover { background: var(--neutro-fundo); }
.tabela tr.inativo { opacity: .55; }
/* lista de contratos: contratado e objeto na mesma coluna, colunas laterais estreitas e com quebra — cabe sem rolagem lateral */
.lista-contratos .col-numero { width: 140px; overflow-wrap: anywhere; }
.lista-contratos .col-principal { min-width: 240px; }
.lista-contratos .contratado { font-weight: 600; color: var(--texto); text-decoration: none; }
.lista-contratos .contratado:hover { color: var(--primaria); text-decoration: underline; }
.lista-contratos .objeto { color: var(--texto-2); font-size: .86rem; margin-top: 2px; }
.lista-contratos .col-modalidade { width: 120px; font-size: .86rem; }
.lista-contratos .col-vigencia { width: 150px; font-size: .86rem; }
.lista-contratos .selos { margin-top: 3px; }
.lista-contratos .selos .selo { white-space: normal; }
.lista-contratos .col-valor { width: 1%; }
/* telas estreitas: cada contrato vira um cartão (a ordenação fica no "Ordenar por") */
@media screen and (max-width: 900px) {
    .lista-contratos thead { display: none; }
    .lista-contratos, .lista-contratos tbody, .lista-contratos tr, .lista-contratos td { display: block; width: auto; }
    .lista-contratos { background: none; }
    .lista-contratos tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 12px; margin-bottom: 10px; }
    .lista-contratos td { border: 0; padding: 0; }
    .lista-contratos .col-numero, .lista-contratos .col-modalidade, .lista-contratos .col-vigencia, .lista-contratos .col-valor { width: auto; }
    .lista-contratos .col-numero, .lista-contratos .col-principal { grid-column: 1 / -1; }
    .lista-contratos .col-numero > div { display: inline; margin-left: 6px; }
    .lista-contratos td.num { text-align: left; }
    .lista-contratos td[data-rotulo]::before { content: attr(data-rotulo); display: block; font-size: .72rem; color: var(--mudo); text-transform: uppercase; letter-spacing: .02em; }
}
/* pagamentos (notas de empenho) */
.busca-linha .filtro-ano { width: auto; flex: 0 0 auto; font-weight: 600; color: var(--primaria); }
.busca-linha select { min-width: 0; } /* nomes longos de órgão não alargam a página no celular */
.busca-linha .filtro-orgao { min-width: min(220px, 38%); } /* ao lado do mês/ano e da busca, não encolhe até sumir o texto */
.lista-pagamentos .col-principal { min-width: 240px; }
.lista-pagamentos .credor { font-weight: 600; color: var(--texto); text-decoration: none; }
.lista-pagamentos .credor:hover { color: var(--primaria); text-decoration: underline; }
.lista-pagamentos .objeto { color: var(--texto-2); font-size: .86rem; margin-top: 2px; }
.lista-pagamentos .selos { margin-top: 3px; }
/* Cargos: ocupantes dentro da linha do cargo, título do quadro, edição do ocupante */
.lista-ocupantes { margin: 0 0 2px; padding-left: 16px; font-size: .88rem; }
.lista-cargos tr.linha-grupo th { background: var(--neutro-fundo); color: var(--texto-2); font-size: .82rem; text-transform: none; letter-spacing: 0; }
.editar-ocupante { margin-bottom: 6px; }
.editar-ocupante summary { list-style: none; }
.editar-ocupante summary::-webkit-details-marker { display: none; }
.editar-ocupante[open] form { margin-top: 8px; min-width: 280px; white-space: normal; }
.conferencia-cargos .grade-filtros { margin: 0 0 8px; }
.conferencia-cargos h2 label.opcao { margin: 0; font-weight: 600; }
/* Mídias, mês a mês: 12 colunas de valores, mais compactas */
.tabela-meses th, .tabela-meses td { padding-left: 5px; padding-right: 5px; font-size: .84rem; }
.tabela-meses .col-principal { min-width: 200px; max-width: 260px; }
.paginacao { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 14px; }
.paginacao a, .paginacao strong, .paginacao span { padding: 5px 10px; border-radius: 6px; border: 1px solid var(--borda); background: var(--superficie); text-decoration: none; }
.paginacao strong { background: var(--primaria); color: var(--primaria-texto); border-color: var(--primaria); }
.paginacao span { border: 0; background: none; }
.abas { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.abas a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--borda); background: var(--superficie); text-decoration: none; color: var(--texto-2); font-size: .88rem; }
.abas a.ativo { background: var(--primaria); border-color: var(--primaria); color: var(--primaria-texto); }

/* ficha do contrato */
.ficha { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 6px 18px; margin-bottom: 14px; }
.ficha dl { display: grid; grid-template-columns: 180px 1fr; margin: 0; }
.ficha dt, .ficha dd { padding: 10px 0; border-bottom: 1px solid var(--borda); margin: 0; }
.ficha dt { color: var(--texto-2); font-size: .88rem; }
.ficha dl > :nth-last-child(-n+2) { border-bottom: 0; }
.texto-longo { white-space: pre-line; }
@media (max-width: 640px) {
    .ficha dl { grid-template-columns: 1fr; }
    .ficha dt { border-bottom: 0; padding-bottom: 0; }
}
.avisos-lista { font-size: .85rem; max-height: 320px; overflow: auto; }
.caixa-entrada { max-width: 380px; margin: 40px auto; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 24px; }
.caixa-entrada form { display: flex; flex-direction: column; gap: 12px; }

/* carregando: janela "Consultando dados…" no meio da tela enquanto a próxima página não chega (app.js) */
.carregando { display: none; }
body.carregando-ativo { cursor: progress; }
body.carregando-ativo .carregando { display: flex; position: fixed; inset: 0; z-index: 100; align-items: center; justify-content: center; padding: 16px;
    background: rgba(10, 16, 24, .55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    animation: carregando-surge .15s ease-out .25s both; } /* computador: espera 250 ms para não piscar nas páginas rápidas */
@media (hover: none), (pointer: coarse) {
    /* iPad/celular: aparece na hora (o navegador para de redesenhar quando a navegação começa) */
    body.carregando-ativo .carregando { animation: none; }
}
.carregando-caixa { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(380px, 100%); padding: 28px 24px 22px;
    background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .35); text-align: center; }
.carregando-giro { width: 46px; height: 46px; border-radius: 50%; border: 4px solid var(--trilho); border-top-color: var(--primaria); animation: carregando-gira .8s linear infinite; }
.carregando-titulo { font-size: 1.15rem; }
.carregando-sub { font-size: .88rem; color: var(--texto-2); }
.carregando-tempo { min-height: 1.2em; font-size: .85rem; color: var(--mudo); font-variant-numeric: tabular-nums; }
@keyframes carregando-gira { to { transform: rotate(360deg); } }
@keyframes carregando-surge { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .carregando-giro { animation-duration: 2.4s; } body.carregando-ativo .carregando { animation: none; } }

/* impressão */
.dica-pdf { font-size: .85rem; color: var(--mudo); margin: 6px 0 0; }
@page { size: A4 landscape; margin: 12mm; }
.cab-impressao { margin-bottom: 12px; }
.cab-impressao p { margin: 4px 0 10px; color: var(--texto-2); }
body.impressao .conteudo { max-width: none; }
@media print {
    :root { --fundo: #fff; --superficie: #fff; --texto: #000; --borda: #bbb; color-scheme: light; }
    body { font-size: 11px; background: #fff; }
    .topo, .filtros, .ordenacao, .paginacao, .botoes, .nao-imprimir, .abas, .carregando { display: none !important; }
    .conteudo { padding: 0; max-width: none; }
    .rolagem { overflow: visible; }
    .tabela th, .tabela td { padding: 4px 6px; }
    .tabela tr { break-inside: avoid; }
    a { color: inherit; text-decoration: none; }
    .b-barra { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}