/* Camada de melhorias aplicada no porte, sobre o padrão de app/shared/base.css.
   Não substitui o padrão: só acrescenta tema escuro, tipografia de gráfico,
   ordenação de tabela e o combo pesquisável. As variáveis da identidade MDR
   (azul, ciano, cinza, risco) NÃO mudam entre os temas — só as superfícies. */

/* ---------------------------------------------------------------- TEMA */
:root[data-tema="escuro"] {
  --ink: #05121E;
  --canvas: #0E1A26;
  --card: #16242F;
  --line: #263846;
  --line2: #1E2E3B;
  --tx: #E6EEF5;
  --tx2: #A7B8C7;
  --tx3: #7A8D9D;

  /* superfícies de estado: fundo escuro, texto claro, mesmo matiz */
  --mdr-azul-sf: #14324B;
  --mdr-ciano-sf: #113B4D;
  --mdr-cinza-sf: #232F3A;
  --risco-sf: #3A1D1B;
  --amber-sf: #3A2C14;
  --green-sf: #123325;
}
:root[data-tema="escuro"] body { background: var(--canvas); color: var(--tx); }
:root[data-tema="escuro"] .sidebar { background: linear-gradient(180deg, #04101A, #0C2337); }
:root[data-tema="escuro"] tbody tr:hover { background: #1B2C39; }
:root[data-tema="escuro"] .fhead:hover { background: #1B2C39; }
:root[data-tema="escuro"] .chip { background: var(--card); }
:root[data-tema="escuro"] select.ms,
:root[data-tema="escuro"] input, :root[data-tema="escuro"] .btn { background: var(--card); color: var(--tx2); }
:root[data-tema="escuro"] .btn.p { background: var(--mdr-azul); color: #fff; }
:root[data-tema="escuro"] .k .v { color: var(--tx); }
:root[data-tema="escuro"] #tt { background: #04101A; border: 1px solid var(--line); }
:root[data-tema="escuro"] .tag.t-neu { background: var(--mdr-cinza-sf); color: #B9C7D3; }
:root[data-tema="escuro"] .tag.t-crit { color: #F0A9A3; }
:root[data-tema="escuro"] .tag.t-warn { color: #F0C888; }
:root[data-tema="escuro"] .tag.t-info { color: #8FD6F2; }
:root[data-tema="escuro"] .tag.t-ok { color: #86D9B4; }

/* Botão de tema — canto do cabeçalho, mesmo desenho dos demais controles */
.tema-btn {
  margin-left: 10px; width: 30px; height: 30px; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card);
  color: var(--tx2); cursor: pointer; font-size: 14px; line-height: 1;
}
.tema-btn:hover { border-color: var(--mdr-azul); color: var(--mdr-azul); }

/* --------------------------------------------------- FONTES DE GRÁFICO */
/* Pedido direto: os rótulos dos gráficos estavam pequenos demais. */
.chart .ml, .chart3 .ml, .cols .cl { font-size: 12.5px; font-weight: 600; color: var(--tx2); }
.chart .lb, .chart3 .lb, .lbls .lb {
  font-size: 11.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px;
}
.leg { font-size: 12.5px; }
.leg i { width: 10px; height: 10px; }
.eixo, .axis, .yl { font-size: 12px; }

/* --------------------------------------------------- TABELAS ORDENÁVEIS */
thead th.ord { cursor: pointer; user-select: none; white-space: nowrap; }
thead th.ord:hover { color: var(--mdr-azul); }
thead th.ord::after {
  content: "⇅"; font-size: 9px; opacity: .35; margin-left: 5px;
}
thead th.ord.asc::after { content: "▲"; opacity: .9; color: var(--mdr-azul); }
thead th.ord.desc::after { content: "▼"; opacity: .9; color: var(--mdr-azul); }

/* ------------------------------------------------ COMBO COM PESQUISA */
/* Substitui o <select multiple> alto, que exibia a lista inteira aberta. */
.combo { position: relative; }
.combo .campo {
  border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px;
  font-size: 12px; color: var(--tx2); background: var(--card);
  cursor: pointer; display: flex; align-items: center; gap: 6px; min-height: 30px;
}
.combo .campo:hover { border-color: var(--mdr-azul); }
.combo .campo .cap { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo .campo .car { font-size: 9px; color: var(--tx3); }
/* Nada escolhido: o texto é uma instrução, não um valor. Cor de placeholder
   para não parecer um fornecedor chamado "— escolha —". */
.combo .campo .cap.vazio { color: var(--tx3); }
.combo .painel {
  display: none; position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(10, 25, 45, .18); overflow: hidden;
}
.combo.aberto .painel { display: block; }
.combo .busca {
  width: 100%; border: 0; border-bottom: 1px solid var(--line2); padding: 8px 10px;
  font-family: inherit; font-size: 12px; background: transparent; color: var(--tx);
}
.combo .busca:focus { outline: 2px solid var(--mdr-ciano); outline-offset: -2px; }
.combo .lista { max-height: 230px; overflow-y: auto; }
.combo .it {
  padding: 6px 10px; font-size: 12px; color: var(--tx2); cursor: pointer;
  display: flex; align-items: center; gap: 7px;
}
.combo .it:hover { background: var(--mdr-azul-sf); }
.combo .it .bx {
  width: 13px; height: 13px; border: 1px solid var(--line); border-radius: 3px;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: #fff;
}
.combo .it.on .bx { background: var(--mdr-azul); border-color: var(--mdr-azul); }
.combo .it .tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo .rod {
  display: flex; gap: 8px; padding: 7px 10px; border-top: 1px solid var(--line2);
  font-size: 11px;
}
.combo .rod a { color: var(--mdr-azul); cursor: pointer; text-decoration: none; }
.combo .vazio { padding: 12px 10px; font-size: 11.5px; color: var(--tx3); }

/* ------------------------------------------------------ FILTRO DE DATA */
.per { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.per select {
  border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px;
  font-family: inherit; font-size: 12px; color: var(--tx2); background: var(--card);
}
.per span { font-size: 11px; color: var(--tx3); }

/* ----------------------------------------------------- DENTRO DO SHELL */
/* A tela executiva tem sidebar própria; dentro do shell ela viraria uma
   segunda barra. Escondida, com o conteúdo ocupando a largura toda. */
html.emoldurado .sidebar { display: none; }
html.emoldurado .shell { display: block; }
html.emoldurado .main { width: 100%; }
/* O shell já traz a marca na barra lateral. O logotipo do cabeçalho da tela
   vira um segundo, lado a lado com o primeiro — a tela é a mesma vista de
   dentro do portal, e a marca não se repete. Fora do shell ele continua,
   porque aí a tela é aberta sozinha. */
html.emoldurado .top .logo,
html.emoldurado .top .mk { display: none; }

/* ============================================================ TEMA ESCURO
   Revisão geral. Os templates aprovados trazem cores claras fixas no CSS
   local (#fff, #FAFCFD, #F6F9FB…) que ignoram as variáveis do tema — no
   modo noturno viravam faixas brancas e realces invisíveis. Corrigido aqui,
   por seletor, sem editar o template. */

/* --- superfícies de linha e nível de árvore --- */
:root[data-tema="escuro"] tr.n1 { background: #1A2A36 !important; }
:root[data-tema="escuro"] tr.n2 { background: #1E303D !important; }
:root[data-tema="escuro"] tr.n3 { background: #223644 !important; }
:root[data-tema="escuro"] .mch,
:root[data-tema="escuro"] .fld,
:root[data-tema="escuro"] .sc,
:root[data-tema="escuro"] .ec,
:root[data-tema="escuro"] .cb,
:root[data-tema="escuro"] .mc { background: var(--card); }

/* --- realce de mouse: no escuro precisa CLAREAR, não escurecer --- */
:root[data-tema="escuro"] tbody tr:hover,
:root[data-tema="escuro"] tr.lv:hover,
:root[data-tema="escuro"] .al:hover,
:root[data-tema="escuro"] .sit:hover,
:root[data-tema="escuro"] .fhead:hover { background: #24384A !important; }
:root[data-tema="escuro"] .k.clic:hover { border-color: var(--mdr-ciano); }

 /* --- cabeçalho fixo do executivo: `.tbar{background:#fff}` está escrito
    no CSS local da tela e ignora as variáveis do tema, então no modo
    noturno virava uma faixa branca sobre fundo escuro --- */
:root[data-tema="escuro"] .tbar { background: var(--card); border-bottom-color: var(--line); }
:root[data-tema="escuro"] .al:hover { background: #24384A; }

/* --- controles com fundo branco fixo --- */
:root[data-tema="escuro"] .tb,
:root[data-tema="escuro"] .btn,
:root[data-tema="escuro"] .chip,
:root[data-tema="escuro"] .fbtn,
:root[data-tema="escuro"] .scope button,
:root[data-tema="escuro"] select,
:root[data-tema="escuro"] input,
:root[data-tema="escuro"] .sinp,
:root[data-tema="escuro"] input.pv,
:root[data-tema="escuro"] input.obs {
  background: var(--card); color: var(--tx2); border-color: var(--line);
}
:root[data-tema="escuro"] .tb.on,
:root[data-tema="escuro"] .btn.p,
:root[data-tema="escuro"] .scope button.on,
:root[data-tema="escuro"] .chip.on { background: var(--mdr-azul); color: #fff; border-color: var(--mdr-azul); }
:root[data-tema="escuro"] .fbtn.on { background: var(--risco); color: #fff; border-color: var(--risco); }
:root[data-tema="escuro"] .sinp:focus,
:root[data-tema="escuro"] input:focus { border-color: var(--mdr-ciano); }

/* --- texto que ficava escuro sobre fundo escuro --- */
:root[data-tema="escuro"] .k .v,
:root[data-tema="escuro"] .cb .v,
:root[data-tema="escuro"] .ec .v,
:root[data-tema="escuro"] .mch .cd,
:root[data-tema="escuro"] .gr .vl { color: var(--tx); }
:root[data-tema="escuro"] .sc .vl { color: #86D9B4; }

/* --- rótulos de gráfico: as superfícies -sf escureceram, o texto precisa clarear --- */
:root[data-tema="escuro"] .lb { border-color: transparent; }
:root[data-tema="escuro"] .lb[style*="--mdr-azul-sf"] { color: #8FD6F2 !important; }
:root[data-tema="escuro"] .lb[style*="--mdr-ciano-sf"] { color: #8FD6F2 !important; }
:root[data-tema="escuro"] .lb[style*="--mdr-cinza-sf"] { color: #B9C7D3 !important; }
:root[data-tema="escuro"] .lb[style*="--risco-sf"] { color: #F0A9A3 !important; }
:root[data-tema="escuro"] .lb[style*="--amber-sf"] { color: #F0C888 !important; }
:root[data-tema="escuro"] .lb[style*="--green-sf"] { color: #86D9B4 !important; }

/* --- badges e caixas de apoio --- */
:root[data-tema="escuro"] .b-alt { color: #8FD6F2; }
:root[data-tema="escuro"] .b-sub { color: #86D9B4; }
:root[data-tema="escuro"] .b-ref { color: #B9C7D3; }
:root[data-tema="escuro"] .pend { background: #3A2C14; border-color: #5C4620; color: #F0C888; }
:root[data-tema="escuro"] .simnota div,
:root[data-tema="escuro"] .imp .zona { background: #12212D; border-color: var(--line); }
:root[data-tema="escuro"] .imp .zona:hover { background: #1B3247; }
:root[data-tema="escuro"] .foot code,
:root[data-tema="escuro"] .imp .mod code { background: #22323F; color: var(--tx2); }

/* --- combo pesquisável --- */
:root[data-tema="escuro"] .combo .painel { box-shadow: 0 10px 28px rgba(0,0,0,.45); }
:root[data-tema="escuro"] .combo .it:hover { background: #24384A; }

/* --- barras de proporção: a trilha some no escuro se ficar clara demais --- */
:root[data-tema="escuro"] .bar,
:root[data-tema="escuro"] .stack,
:root[data-tema="escuro"] .esc,
:root[data-tema="escuro"] .bar2 { background: #22323F; }

/* --- células de valor com cor semântica seguem legíveis --- */
:root[data-tema="escuro"] .pos { color: #F0A9A3; }
:root[data-tema="escuro"] .neg { color: #86D9B4; }

/* ------------------------------------------------------------ LOGOTIPO
   Fica AQUI, e não no base.css, porque melhorias.css é injetado em TODA tela
   portada — inclusive nas que trazem a própria folha de estilo em vez de usar
   a compartilhada.

   A `dashboard_vencimentos_v2` é uma dessas, e sem a regra a imagem de
   4856px de largura renderizou em tamanho natural: o logotipo tomou a tela
   inteira e empurrou o cabeçalho para fora. Passou porque eu testei nas
   telas que usam o base.css e assumi o resto.

   O arquivo é 4856x1188 — proporção 4,09:1. A altura manda e a largura sai
   por consequência. */
.logo{height:26px;width:auto;display:block;flex-shrink:0;max-width:none}
.logo-g{height:44px}
/* No tema escuro o azul da marca perde contraste. Um leve clareamento
   resolve sem descaracterizar o logotipo — inverter a cor, não: as duas
   cores da marca existem de propósito. */
[data-tema="escuro"] .logo{filter:brightness(1.25) saturate(1.1)}
/* ...menos sobre chapa branca, onde o clareamento só lavaria a marca. */
[data-tema="escuro"] .chapa .logo{filter:none}

/* ------------------------------------------------- CONTROLES DE FORMULÁRIO

   O padrão visual cobria `.btn`, `.chip` e `select.ms` — o resto ficava com
   o widget nativo do sistema. Nas telas de Administração isso aparecia
   inteiro: o `<input type=file>` do navegador, a caixa de seleção cinza e o
   `<select>` sem classe, todos com a moldura do sistema operacional no meio
   de uma tela desenhada.

   Isto NÃO redesenha nada aprovado: alcança só o que não tinha estilo
   nenhum. Widget nativo não foi decisão de design — foi ausência dela. Os
   controles com classe própria (`.obs`, `.pv`, `.qi`, `select.ms`) continuam
   como estão, porque ali houve escolha. */

/* ALTURA COMUM. Numa linha de flex com campo + botão, cada controle
   calculava a própria altura a partir do próprio conteúdo: o botão saía um
   ou dois pixels fora do campo ao lado, e o campo de arquivo — que tem um
   botão dentro — saía mais alto que os dois. Alinhar por `align-items` não
   resolve isso, porque o desalinhamento é de tamanho, não de posição.

   `box-sizing` e `line-height` fixos fazem todos caírem na mesma altura sem
   precisar cravar um `height`, que quebraria o texto que passa de uma linha. */
input, select, textarea, .btn {
  box-sizing: border-box; line-height: 1.45; vertical-align: middle;
}

input:not([type]), input[type="text"], input[type="email"], input[type="number"],
input[type="search"], input[type="date"], input[type="password"], textarea {
  font-family: inherit; font-size: 12px; color: var(--tx2);
  background: var(--card); border: 1px solid var(--line); border-radius: 7px;
  padding: 6px 9px;
}
input:not([type]):focus, input[type="text"]:focus, input[type="email"]:focus,
input[type="number"]:focus, input[type="search"]:focus, input[type="date"]:focus,
input[type="password"]:focus, textarea:focus, select:focus {
  outline: 2px solid var(--mdr-ciano); outline-offset: -1px;
}

/* `select` sem classe herda o mesmo desenho do `select.ms`, mais a seta
   própria: a nativa muda de forma em cada sistema. */
select:not(.ms) {
  font-family: inherit; font-size: 12px; color: var(--tx2);
  background: var(--card); border: 1px solid var(--line); border-radius: 7px;
  padding: 6px 26px 6px 9px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236E7C8A' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
  background-size: 9px;
}

/* O campo de arquivo é o que mais destoava: o botão nativo do Chrome vem com
   moldura cinza e cantos retos. `::file-selector-button` deixa o botão com o
   mesmo desenho de `.btn`, e o resto do campo vira o rótulo do arquivo. */
input[type="file"] {
  font-family: inherit; font-size: 12px; color: var(--tx3);
  border: 1px solid var(--line); border-radius: 7px; background: var(--card);
  padding: 5px 9px 5px 5px; max-width: 100%;
}
/* O botão interno tem 1px de borda e 1px de padding a menos de cada lado que
   o campo — é o que faz o conjunto fechar na mesma altura do `.btn` ao lado
   em vez de sobrar dois pixels. */
input[type="file"]::file-selector-button {
  font-family: inherit; font-size: 11.5px; font-weight: 600; line-height: 1.45;
  color: var(--tx2); background: var(--canvas);
  border: 1px solid var(--line); border-radius: 5px;
  padding: 3px 10px; margin-right: 9px; cursor: pointer;
}
input[type="file"]::file-selector-button:hover {
  border-color: var(--mdr-azul); color: var(--mdr-azul);
}
input[type="file"]:focus-within { outline: 2px solid var(--mdr-ciano); outline-offset: -1px; }

/* Caixa de seleção e rádio: o desenho nativo é cinza-sistema em todo lugar.
   `accent-color` é uma linha e mantém o comportamento nativo — inclusive
   teclado e leitor de tela, que uma caixa desenhada à mão perderia. */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--mdr-azul); width: 15px; height: 15px; cursor: pointer;
  vertical-align: middle;
}
input[type="checkbox"]:disabled, input[type="radio"]:disabled { cursor: not-allowed; opacity: .45; }

/* `.res` é o retorno curto ao lado de um botão ("salvo", "conferindo…").
   Usada em três telas e definida em NENHUMA: ficava com o texto cru do
   navegador, 16px e na cor do corpo, ao lado de um botão de 12px — o que
   parece botão desalinhado e é texto grande demais. */
.res {
  font-size: 11.5px; color: var(--tx3); line-height: 1.45;
  align-self: center; white-space: nowrap;
}

/* Seleção compacta dentro de tabela: mantém a seta desenhada, mas reserva o
   espaço dela. Sem isto o texto da opção passa por baixo da seta quando a
   tela reduz o padding por estilo inline. */
select:not(.ms).compacto, table select:not(.ms) {
  font-size: 11px; padding: 3px 20px 3px 7px;
  background-position: right 6px center; background-size: 8px;
}

input:disabled, select:disabled, textarea:disabled,
.btn:disabled { opacity: .5; cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: var(--tx3); }

:root[data-tema="escuro"] select:not(.ms) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23A7B8C7' stroke-width='1.6'/%3E%3C/svg%3E");
}
:root[data-tema="escuro"] input[type="file"]::file-selector-button {
  background: var(--ink);
}