/* A MOLDURA DA V2 (item 3.1). Vem depois do launivo.css de propósito:
 * o verde passa a ser a cor principal e o menu deixa o roxo. */

:root {
  --sag-green: #15866d;
  --sag-green-dark: #0d3f36;
  --sag-green-soft: #eaf6f2;
  --sag-bg: #f4f6f5;
  --sag-panel: #fff;
  --sag-line: #e4e9e7;
  --sag-ink: #17201e;
  --sag-muted: #66736f;
  --sag-soft: #91a09b;
  --sag-amber: #e29c32;
  --sag-red: #dc625c;
  --roxo: var(--sag-green);
  --roxo-hover: var(--sag-green-dark);
  --roxo-soft: var(--sag-green-soft);
  --canvas: var(--sag-bg);
  --line: var(--sag-line);
  --ink: var(--sag-ink);
  --ok: var(--sag-green);
}

body { font-family: Inter, Manrope, "Segoe UI", system-ui, sans-serif; }

.aplicacao {
  height: 100vh;
  overflow: hidden;
  background: var(--sag-bg);
}

.menu {
  width: 232px;
  flex: 0 0 232px;
  height: 100vh;
  max-height: 100vh;
  position: relative;
  top: auto;
  align-self: stretch;
  padding: 0;
  background: #0d302a;
  color: #b9d2ca;
  display: flex;
  flex-direction: column;
  z-index: 20;
}

.menu .marca {
  height: 72px;
  margin: 0;
  padding: 14px 17px;
  gap: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  color: #fff;
}

.marca-verde {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 11px;
  background: linear-gradient(145deg, #27ae8b, #168168);
  display: grid;
  place-items: center;
  box-shadow: 0 7px 20px rgba(0, 0, 0, .18);
}

.marca-verde img { width: 26px; height: 26px; border-radius: 7px; display: block; }

.menu .marca b { font-size: 15px; letter-spacing: .4px; font-weight: 700; }
.menu .marca small { display: block; font-size: 10.5px; color: #80b5a4; margin-top: 2px; font-weight: 500; }

/* O LOGO NO JEITO DO SHERLOCK 3D (Henrique, 16/10: a opcao B "bem maior, pegando quase toda
 * a area, grandao em bold, e embaixo numa linha so Lancamento sem sofrimento"). O nome ocupa
 * a largura do menu; o simbolo pequeno so aparece com o menu recolhido. */
/* 41 px no nome e 16 px de cada lado: medido no navegador com a Inter, o icone + o nome dao
 * 200,1 px e a frase 200,7 px — as duas linhas batem de ponta a ponta. */
.menu .marca {
  position: relative;
  height: auto;
  padding: 18px 16px 16px;
}
/* O ICONE APROVADO (a seta na diagonal, quadradinho verde) ao lado do nome — o mesmo desenho
 * do `marca.svg`, que vale para a aba do navegador e para o menu recolhido. */
.menu .marca .marca-linha { display: flex; align-items: center; gap: 9px; }
.menu .marca .marca-verde {
  display: block; width: 40px; height: 40px; flex: none;
  background: none; box-shadow: none; border-radius: 0;
}
.menu .marca .marca-verde img { width: 40px; height: 40px; border-radius: 0; }
.menu .marca .marca-texto { display: block; min-width: 0; }
.menu .marca .marca-nome {
  display: block;
  color: #ffffff;
  font-size: 41px;
  font-weight: 800;
  letter-spacing: -1.4px;
  line-height: .95;
  white-space: nowrap;
}
.menu .marca .marca-nome em { font-style: normal; color: #4dd7be; }
.menu .marca .marca-texto small {
  /* 1 px: a linha do icone tem 40 px e o nome fica no meio dela; sem isto sobrava um vao
   * grande entre o nome e a frase (Henrique, 16/10). */
  margin-top: 1px;
  color: #80b5a4;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* O PINGO DO I BRANCO (Henrique, 16/10: "o mesmo formato e o mesmo lugar"): e o pingo
 * ORIGINAL da letra, pintado de branco — a letra e recortada por um degrade que troca de cor
 * no vao entre o pingo e a perninha. 32,3% foi medido nos pixels do "i" da Inter 800 (o vao
 * fica entre 32,1% e 32,5% da altura da caixa da letra). */
.menu .marca .marca-nome .pingo {
  background: linear-gradient(to bottom, #ffffff 0 32.3%, #4dd7be 32.3% 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#menu-itens {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 13px 10px 8px;
  /* A BARRA DE ROLAGEM DISCRETA (Henrique, 16/10, pela sala Map Marketing): fina, sem
   * setinhas, trilho transparente; só aparece com o mouse sobre o menu; verde-água ao
   * passar o mouse na própria barra. */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
#menu-itens:hover { scrollbar-color: rgba(255, 255, 255, .18) transparent; }
#menu-itens::-webkit-scrollbar { width: 6px; }
#menu-itens::-webkit-scrollbar-button { display: none; height: 0; }
#menu-itens::-webkit-scrollbar-track { background: transparent; }
#menu-itens::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; }
#menu-itens:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); }
#menu-itens::-webkit-scrollbar-thumb:hover { background: rgba(77, 215, 190, .55); }
/* O ESMAECIDO NO PÉ só enquanto há mais itens embaixo — no fim da rolagem ele sai, para não
 * apagar o último item. Quem liga e desliga a classe é o `marcarARolagemDoMenu`. */
#menu-itens.tem-mais-embaixo {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
}

#menu-do-pe { padding: 0 10px 8px; flex: none; }
#menu-do-pe:empty { padding: 0; }
#menu-do-pe:not(:empty) {
  border-top: 1px solid rgba(255, 255, 255, .07);
  padding-top: 8px;
}
#menu-do-pe > .sag-nav-group + .sag-nav-group {
  border-top: 1px solid rgba(255, 255, 255, .07);
  margin-top: 8px;
  padding-top: 8px;
}

.versao-no-menu {
  margin: 0;
  flex: none;
  padding: 4px 12px 12px;
  font-size: 10px;
  line-height: 1.3;
  color: rgba(255, 255, 255, .35);
  white-space: nowrap;
  text-align: center;  /* centralizada no pé (Henrique, 16/10) */
}

/* OPÇÃO S2 (Henrique, 16/10 — "o menu do Sherlock é mais bem acabado"): título de grupo
 * PEQUENO e discreto, porque quem chama o olho são os itens; setinha que diz se o grupo
 * está aberto; o primeiro grupo (Visão geral, Indicadores) sem título. */
.sag-nav-group { margin-bottom: 2px; }
.sag-nav-group.sem-titulo { margin-bottom: 4px; }
.sag-nav-group.sem-titulo > .sag-nav-label { display: none; }
/* Entre os dois grupos sem título, um traço fino separa os blocos (como no Sherlock). */
.sag-nav-group.sem-titulo + .sag-nav-group.sem-titulo {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.sag-nav-label {
  width: 100%;
  min-height: 34px;
  margin-top: 8px;
  padding: 0 4px 0 10px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border-radius: 7px;
  font-family: inherit;
}
/* OPÇÃO C1 EM NEGRITO (Henrique, 16/10: "a categoria não pode ter letra menor que as opções
 * que abrem" e "gostei do C1, mas com bold"): um tracinho verde no lugar da bolinha com a
 * letra, e a palavra do tamanho dos itens, branca e em negrito. */
.sag-nav-label::before {
  content: "";
  flex: none;
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: #4dd7be;
}
.sag-nav-label .sag-nav-inicial { display: none; }
.sag-nav-icone-do-grupo { display: none; }
/* NO PÉ (Ajuda, Administração, Meu perfil, Plataforma) o grupo tem cara de ITEM, como no
 * Sherlock: ícone, letra normal do tamanho dos itens, sem tracinho, sem traço comprido. */
#menu-do-pe .sag-nav-label {
  min-height: 40px;
  margin-top: 0;
  padding: 0 6px 0 10px;
  gap: 12px;
  color: rgba(255, 255, 255, .86);
  font-size: 15px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  border-radius: 10px;
}
#menu-do-pe .sag-nav-label::before,
#menu-do-pe .sag-nav-traco { display: none; }
#menu-do-pe .sag-nav-palavra { flex: 1; text-align: left; }
#menu-do-pe .sag-nav-label:hover { background: rgba(255, 255, 255, .05); color: #fff; }
#menu-do-pe .sag-nav-icone-do-grupo { display: grid; place-items: center; width: 20px; height: 20px; }
#menu-do-pe .sag-nav-icone-do-grupo svg { width: 20px; height: 20px; display: block; }

.sag-nav-label:hover { background: transparent; color: #4dd7be; }
.sag-nav-seta { flex: none; display: grid; place-items: center; width: 14px; height: 14px; }
.sag-nav-seta svg {
  width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round; opacity: .8; transition: transform .15s ease;
}
.sag-nav-group:not(.is-collapsed) .sag-nav-seta svg { transform: rotate(90deg); }
.sag-nav-inicial {
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #4dd7be;
  color: #0d302a;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}
.sag-nav-palavra { flex: none; }
.sag-nav-traco { flex: 1; height: 1px; background: rgba(255, 255, 255, .12); }
/* O botão fica na mesma linha do título, encostado à direita, depois do traço.
 * Aberto: |< . Recolhido: >| , no topo da lista e centrado (regras lá embaixo). */
.sag-nav-topo {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.sag-nav-topo > .sag-nav-link { flex: 1 1 auto; min-width: 0; }
#botao-recolher {
  --icone-recolher: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3Cpath d='M4 4v16'/%3E%3C/svg%3E");
  --icone-expandir: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3Cpath d='M20 4v16'/%3E%3C/svg%3E");
  flex: none;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background-color: transparent;
  background-image: var(--icone-recolher);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  box-shadow: none;
  color: transparent;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  cursor: pointer;
}
#botao-recolher:hover { background-color: rgba(255, 255, 255, .08); }
html[data-menu="recolhido"] #botao-recolher { background-image: var(--icone-expandir); }
.sag-nav-items { display: block; }
.sag-nav-group.is-collapsed .sag-nav-items { display: none; }

.menu a.sag-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  min-height: 40px;
  min-width: 0;
  padding: 0 10px;
  border-radius: 10px;
  color: rgba(255, 255, 255, .86);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  margin: 1px 0;
  overflow: hidden;
}

.menu a.sag-nav-link:hover { background: rgba(255, 255, 255, .05); color: #fff; }

.menu a.sag-nav-link.aqui {
  background: rgba(255, 255, 255, .07);
  color: #fff;
  font-weight: 600;
  box-shadow: none;
}

.sag-nav-icon {
  width: 20px;
  height: 20px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .07);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .2px;
  flex: 0 0 auto;
  color: inherit;
}
.sag-nav-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sag-nav-icon svg {
  width: 20px;
  height: 20px;
  display: block;
  flex: none;
}

.menu a.sag-nav-link.aqui .sag-nav-icon { background: transparent; color: #4dd7be; }

.folha {
  min-width: 0;
  min-height: 0;
  height: 100vh;
  overflow: hidden;
  padding: 0;
  gap: 0;
  background: var(--sag-bg);
}

#cabecalho { flex: none; }

#conteudo {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 22px 22px 18px;
}

.gg-abas {
  position: static;
  top: auto;
  z-index: 5;
  height: 64px;
  margin: 0;
  padding: 0 22px;
  gap: 16px;
  flex-wrap: nowrap;
  border-radius: 0;
  background: #fff;
  color: var(--sag-ink);
  border-bottom: 1px solid var(--sag-line);
  box-shadow: none;
}

/* VAGA DO NÚMERO (tarefa 14): vazia some sem buraco; cheia alinha com o seletor
 * de projetos (mesmo tamanho, mesma altura). */
.lugar-do-numero { flex: none; }
.lugar-do-numero:empty { display: none; }
.lugar-do-numero .seletor-do-numero {
  padding-right: 0;
  border-right: 0;
}
.lugar-do-numero .numero-escolhido {
  max-width: 240px;
}
.lugar-do-numero .numero-escolhido:hover,
.lugar-do-numero .numero-escolhido[aria-expanded="true"] {
  background: var(--sag-green-soft);
}

/* QUEBRA PARA BAIXO DE PROPÓSITO: sem 120 px, a frase desce para a segunda linha e o limite
 * de altura a esconde inteira, em vez de sobrarem duas ou três letras.
 * QUEM CEDE PRIMEIRO É A FRASE (flex-shrink 100), depois a etiqueta. O TÍTULO NUNCA: o
 * `min-content` segura o nome inteiro (em Contas › A receber ele tinha virado só "C"). */
.gg-abas-titulo {
  display: flex;
  flex: 0 100 auto;
  flex-flow: row wrap;
  align-items: center;
  gap: 12px 8px;
  max-width: none;
  max-height: 32px;
  overflow: hidden;
  margin-right: auto;
  min-width: min-content;
}
.gg-abas-titulo b {
  color: var(--sag-ink);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.2px;
  flex: none;
}
.gg-abas-titulo b::after { content: none; }
.gg-abas-titulo small {
  flex: 1 1 120px;
  min-width: 0;
  color: var(--sag-soft);
  font-size: 11.5px;
  line-height: 1.25;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.gg-abas .barra-de-estado {
  background: #fff !important;
  color: var(--sag-ink) !important;
  border: 1px solid var(--sag-line);
  border-radius: 9px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.gg-abas .barra-de-estado .ponto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: block;
}

.gg-abas .barra-de-estado.e-botao {
  background: var(--sag-green) !important;
  color: #fff !important;
  border-color: var(--sag-green);
  cursor: pointer;
}

.gg-abas .gg-ajuda {
  border-color: var(--sag-line);
  background: #fff;
  color: var(--sag-ink);
}

.gg-abas .gg-ajuda:hover:not(:disabled) { background: var(--sag-green-soft); color: var(--sag-green-dark); }

.gg-abas-acoes { display: flex; align-items: center; gap: 8px; flex: none; }
.gg-abas-acoes:empty { display: none; }
/* OS BOTOES DO CABECALHO BRANCO (15/10/2026). A regra antiga do launivo.css pintava os
 * botoes de branco para a barra AZUL; com o cabecalho branco do 3.1 eles ficaram branco no
 * branco — "Importar CSV" e "Exportar CSV" existiam e ninguem via. O botao da v2 (`.tbtn`):
 * fundo branco, borda da linha, texto escuro; o principal continua verde. */
.gg-abas-acoes .btn,
.gg-abas-acoes a.btn {
  background: #fff;
  border: 1px solid var(--sag-line, #e4e9e7);
  color: var(--sag-ink, #17201e);
  border-radius: 9px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
}
.gg-abas-acoes .btn:hover,
.gg-abas-acoes a.btn:hover { background: #f4f7f6; }
.gg-abas-acoes .btn.principal {
  background: var(--sag-green, #15866d);
  border-color: var(--sag-green, #15866d);
  color: #fff;
}
.gg-abas-acoes .btn.principal:hover { filter: brightness(.94); }

/* A ETIQUETA DO AMBIENTE (item 3.8): pílula pequena, sempre com a palavra. */
/* Encolhe com reticências quando a barra aperta: na tela de Contas faltavam 20 px. */
.etiqueta-do-ambiente {
  flex: 0 1 auto;
  min-width: 28px;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid #f1d29f;
  background: #fff6e6;
  color: #8a540d;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.etiqueta-do-ambiente[data-ambiente="desenvolvimento"] {
  border-color: var(--sag-line);
  background: #eef1f0;
  color: var(--sag-muted);
}

/* NOTEBOOK: a etiqueta fica no nome do ambiente, e o texto inteiro aparece ao apontar. Com os 232 px
 * dela, a frase ao lado do título sumia em Atendimento e Negócios. */
@media (max-width: 1500px) {
  .etiqueta-do-ambiente { max-width: 120px; }
}

/* O ESTADO SÓ QUANDO IMPORTA (P.2b): parado, ele some sem deixar buraco. A regra acima
 * diz `inline-flex`, e por isso o `hidden` precisa ser dito aqui. */
.gg-abas .barra-de-estado[hidden] { display: none; }

/* O SELETOR DE PROJETOS (P.2b): entre o estado e o "?", no desenho do "Todos os números"
 * do Atendimento. A cor do projeto vem sempre com o ícone e o nome — cor sozinha não diz
 * qual projeto é. */
.seletor-de-projeto,
.seletor-de-projeto-opcao {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--sag-ink);
  font: inherit;
  cursor: pointer;
}

.seletor-de-projeto { max-width: 240px; padding: 4px 6px; border-radius: 9px; }
.seletor-de-projeto:hover,
.seletor-de-projeto[aria-expanded="true"] { background: var(--sag-green-soft); }
.seletor-de-projeto > b { font-size: 12px; color: var(--sag-muted); }

.seletor-de-projeto-texto { display: flex; flex-direction: column; min-width: 0; }
.seletor-de-projeto-texto strong {
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.seletor-de-projeto-texto small { font-size: 11px; color: var(--sag-muted); white-space: nowrap; }

.seletor-de-projeto-lista { min-width: 260px; max-height: 360px; overflow-y: auto; gap: 2px; }
.seletor-de-projeto-opcao { width: 100%; padding: 7px 8px; border-radius: 9px; }
.seletor-de-projeto-opcao:hover,
.seletor-de-projeto-opcao:focus-visible { background: var(--sag-green-soft); outline: none; }
.seletor-de-projeto-opcao[aria-selected="true"] { background: var(--sag-green-soft); color: var(--sag-green-dark); }

.seletor-de-projeto-selo {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--sag-green-soft);
  color: var(--sag-green);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
}

.seletor-de-projeto-selo[data-cor="todos"] {
  background: var(--sag-green);
  color: var(--sag-panel);
}

.seletor-de-projeto-selo svg {
  width: 16px;
  height: 16px;
  display: block;
}

.seletor-de-projeto-selo[data-cor="verde"] { background: #e3f4ee; color: #0f6b56; }
.seletor-de-projeto-selo[data-cor="azul"] { background: #e6effc; color: #2457a6; }
.seletor-de-projeto-selo[data-cor="violeta"] { background: #efe9fb; color: #5b3aa6; }
.seletor-de-projeto-selo[data-cor="ambar"] { background: #fdf1dc; color: #8a540d; }
.seletor-de-projeto-selo[data-cor="vermelho"] { background: #fbe7e6; color: #a63a35; }
.seletor-de-projeto-selo[data-cor="cinza"] { background: #eef1f0; color: #4f5c58; }

/* Henrique, 16/10: no seletor do topo o ícone fica solto, sem o quadrado.
 * A tabela lado a lado usa a mesma classe com as iniciais — ela não tem svg. */
.seletor-de-projeto-selo:has(svg) {
  width: 26px;
  height: 26px;
  border-radius: 0;
  background: transparent;
  color: var(--sag-green);
}
.seletor-de-projeto-selo:has(svg) svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* O "TODOS" TAMBÉM SEM O QUADRADO (Henrique, 16/10: "tem um contorno verde fora do ícone"):
 * a regra `[data-cor="todos"]` lá de cima é mais forte que o `:has(svg)` e repintava o fundo. */
.seletor-de-projeto-selo:has(svg)[data-cor="todos"] { background: transparent; color: var(--sag-green); }
/* E OS PROJETOS TAMBÉM (Henrique, 16/10: "dos outros projetos continua com fundo"): as regras
 * `[data-cor="verde"]`… de cima pintam o fundo claro e vencem o `:has(svg)` sozinho. */
.seletor-de-projeto-selo:has(svg)[data-cor] { background: transparent; }
.seletor-de-projeto-selo:has(svg)[data-cor="verde"] { color: #0f6b56; }
.seletor-de-projeto-selo:has(svg)[data-cor="azul"] { color: #2457a6; }
.seletor-de-projeto-selo:has(svg)[data-cor="violeta"] { color: #5b3aa6; }
.seletor-de-projeto-selo:has(svg)[data-cor="ambar"] { color: #8a540d; }
.seletor-de-projeto-selo:has(svg)[data-cor="vermelho"] { color: #a63a35; }
.seletor-de-projeto-selo:has(svg)[data-cor="cinza"] { color: #4f5c58; }

/* Com o seletor num projeto, o filtro de projeto que a tela já tinha some: dois lugares
 * dizendo o projeto é como eles discordam. */
html[data-projeto-escolhido] .co-filtros label:has(> select[name="projeto_id"]),
html[data-projeto-escolhido] .ng-barra select[name="projeto_id"],
html[data-projeto-escolhido] #fin-projeto { display: none; }
/* A fileira das contas perde uma coluna junto: sem isto o "Aplicar" esticaria. O `!important`
 * vence o `--cols` escrito no style da fileira (telas.js, filtrosDasContas). */
html[data-projeto-escolhido] .linha.filtros:has(> #fin-projeto) { --cols: 1fr 1fr auto !important; }