/* ==========================================================================
   Sistema de Gestão BTS — folha de estilo

   Duas decisões que valem explicação:

   1. A grade NÃO fica dentro de um contêiner com rolagem própria. A página
      inteira rola, nos dois sentidos. Contêiner com `overflow-x` empurra a
      barra horizontal para o fim da tabela — para rolar de lado era preciso
      descer todas as linhas antes. Aqui a barra é a do navegador, sempre à mão.

   2. Cabeçalho da tabela e as duas primeiras colunas são `sticky`. Como não há
      contêiner de rolagem, elas grudam na viewport — a linha nunca perde a
      identidade quando se rola para o lado.
   ========================================================================== */

/* ---------------------------------------------------------------- tema claro */
:root {
  --fundo: #f5f6f8;
  --superficie: #ffffff;
  --superficie-2: #fafbfc;
  --borda: #e3e6ea;
  --borda-forte: #cbd2da;
  --texto: #171f2b;
  --texto-fraco: #64707f;
  /* ---- Paleta oficial NAPIER. Ver `Marca_NAPIER.md` para CMYK e Pantone,
     que nao existem em CSS e sao para material impresso. ---- */
  --napier-marinho: #192A4A;      /* institucional — wordmark e base do N */
  --napier-esmeralda: #52B788;    /* degrade: coluna esquerda */
  --napier-agua: #36B3A9;         /* degrade: transicao 1 */
  --napier-turquesa: #2CA5B5;     /* degrade: transicao 2 */
  --napier-celeste: #4895EF;      /* degrade: coluna direita */

  --marca: #13304e;
  --marca-clara: #1e4b78;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06);

  /* paleta de status — cores cheias, no espírito do Monday */
  --verde: #00c875;
  --laranja: #fdab3d;
  --vermelho: #e2445c;
  --roxo: #a25ddc;
  --azul: #579bfc;
  --azul-escuro: #0086c0;
  --cinza: #a9b0bb;

  --raio: 8px;

  /* largura da 1ª coluna. `fixa2` gruda exatamente nela: dois números
     soltos aqui davam sobreposição na rolagem lateral. */
  --col-ordem: 62px;
  /* as duas colunas de ação, grudadas na borda direita */
  --col-acao: 42px;

  /* lixeira, em máscara: assim ela toma a cor do texto (e do hover) */
  --icone-arquivo: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='4' rx='1'/%3E%3Cpath d='M5 8v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8M10 12h4'/%3E%3C/svg%3E");
  --icone-lixeira: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2m3 0v14a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6M10 11v6M14 11v6'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- tema escuro */
:root[data-tema="escuro"] {
  --fundo: #12161c;
  --superficie: #1a2029;
  --superficie-2: #202834;
  --borda: #2b3542;
  --borda-forte: #3b4757;
  --texto: #e6ebf2;
  --texto-fraco: #94a1b2;
  --marca: #0d1b2c;
  --marca-clara: #7db2ec;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4);
  --cinza: #6b7480;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #12161c;
    --superficie: #1a2029;
    --superficie-2: #202834;
    --borda: #2b3542;
    --borda-forte: #3b4757;
    --texto: #e6ebf2;
    --texto-fraco: #94a1b2;
    --marca: #0d1b2c;
    --marca-clara: #7db2ec;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4);
    --cinza: #6b7480;
  }
}

* { box-sizing: border-box; }

html { scroll-padding-top: calc(var(--altura-topo, 56px) + 40px); }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: "Titillium Web", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  /* a página é tão larga quanto o conteúdo mais largo — a barra horizontal
     é a do navegador, não a de um contêiner interno */
  min-width: max-content;
}

a { color: var(--marca-clara); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- topo */
/* `fixed`, e nao `sticky`: com `sticky` a barra pertencia ao fluxo do `main`,
   que e `width: max-content` — rolar de LADO a levava junto, e a logo sumia da
   tela. Fixa em `100vw` ela ignora a largura do conteudo e fica sempre onde
   esta. Como sai do fluxo, o `body` compensa com `padding-top`. */
header.topo {
  background: var(--marca);
  color: #fff;
  padding: 12px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  box-sizing: border-box;
  z-index: 40;
}
/* As duas barras saem do fluxo, entao o conteudo precisa reservar a altura
   delas. Medidas em JS, porque mudam com a fonte e com o zoom. */
body { padding-top: calc(var(--altura-topo, 56px) + var(--altura-trilha, 0px)); }
/* A logo no lugar do nome escrito. A barra e sempre do azul da marca nos dois
   temas, entao a logo aqui e sempre a versao clara — a escura sumiria no
   proprio fundo. `height` fixa e `width: auto` para nao deformar se a arte for
   trocada por outra de proporcao diferente. */
header.topo a.marca {
  display: flex; align-items: center; gap: 11px;
  color: #fff; text-decoration: none;
}
header.topo a.marca img { height: 28px; width: auto; display: block; }
/* separa as duas marcas sem desenhar uma barra a mais na tela */
header.topo a.marca img.napier {
  height: 24px;                     /* um pouco menor que a da BTS */
  padding-left: 12px; margin-left: 1px;
  border-left: 1px solid rgba(255, 255, 255, .22);
}
header.topo .sub { color: #9fb6cf; font-size: 13px; }
header.topo .espaco { flex: 1; }

button.tema {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  font: inherit;
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
button.tema:hover { background: rgba(255, 255, 255, .2); }

/* Idem: fixa logo abaixo do cabecalho e na largura da JANELA. Ela era `sticky`
   com `min-width: 100%`, e 100% do `main` (max-content) e a largura do
   CONTEUDO — por isso ficava curta, terminando no meio da tela. */
nav.trilha {
  padding: 11px 28px;
  font-size: 13px;
  color: var(--texto-fraco);
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  position: fixed;
  top: var(--altura-topo, 56px);
  left: 0;
  width: 100vw;
  box-sizing: border-box;
  z-index: 35;
}
nav.trilha span.sep { margin: 0 8px; color: var(--borda-forte); }

main { padding: 22px 28px 40px; min-width: 100%; width: max-content; }

/* O rodape fecha a pagina com o nome por extenso — o topo so mostra NAPIER. */
footer.rodape {
  padding: 16px 28px 26px;
  border-top: 1px solid var(--borda);
  color: var(--texto-fraco); font-size: 12px; line-height: 1.5;
  min-width: 100%; width: max-content; box-sizing: border-box;
}
footer.rodape strong { color: var(--texto); font-weight: 700; letter-spacing: .6px; }
footer.rodape .sep { margin: 0 8px; opacity: .5; }

/* As duas marcas no portao de entrada, na MESMA altura e lado a lado. Aqui nao
   ha a barra azul por tras, entao a arte segue o tema: a escura no fundo
   claro, a clara no escuro. Sao DUAS imagens de cada com `display`, e nao uma
   trocada por `content: url()` — aquilo depende de especificidade, nao pegou
   no tema escuro, e a marca azul-marinho ficou sobre fundo azul-marinho. */
.marcas-portao {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin: 0 0 20px; flex-wrap: wrap;
}
/* SEM `display` aqui: `.marcas-portao img` (0,1,1) vence `.so-tema-escuro`
   (0,1,0), e um `display: block` neste seletor anulava a troca por tema — as
   QUATRO imagens apareciam de uma vez no tema claro. Quem manda no `display`
   sao as classes de tema, e so elas. */
.marcas-portao img { height: 44px; width: auto; }
.marcas-portao img.napier { height: 38px; }
.marcas-portao .risco {
  width: 1px; height: 30px; background: var(--borda-forte); flex: none;
}
/* ALINHAMENTO ÓPTICO da marca NAPIER.
   No símbolo, as barras sobem acima do letreiro: ele ocupa só os 60% de baixo
   da arte, e o centro dele fica a 68,8% da altura. Centralizar a CAIXA da
   imagem — que é o que `align-items: center` faz — deixava o letreiro sentado
   abaixo do "BTS" ao lado. Subir 18,8% da própria altura põe o letreiro no
   mesmo eixo. Em PORCENTAGEM porque `translate` resolve contra o tamanho do
   próprio elemento: serve para os 24px do topo e os 38px do portão sem
   segundo número para manter em sincronia.
   `transform` e não `margin`: desloca só o desenho, sem mexer no layout. */
img.napier { transform: translateY(-18.8%); }

.so-tema-claro { display: block; }
.so-tema-escuro { display: none; }
:root[data-tema="escuro"] .so-tema-claro { display: none; }
:root[data-tema="escuro"] .so-tema-escuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .so-tema-claro { display: none; }
  :root:not([data-tema="claro"]) .so-tema-escuro { display: block; }
}


h1 { font-size: 23px; margin: 0 0 4px; font-weight: 600; letter-spacing: -.2px; }
p.legenda { color: var(--texto-fraco); margin: 0 0 18px; font-size: 14px; }

/* ---------------------------------------------------------------- abas */
.abas {
  display: flex;
  gap: 3px;
  border-bottom: 1px solid var(--borda);
  margin: 16px 0 0;
  flex-wrap: wrap;
  position: sticky;
  left: 28px;
  width: max-content;
}
.aba {
  padding: 8px 15px;
  font-size: 13.5px;
  color: var(--texto-fraco);
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  text-decoration: none;
  position: relative;
  top: 1px;
}
.aba:hover { background: var(--superficie-2); text-decoration: none; color: var(--texto); }
.aba.ativa {
  background: var(--superficie);
  border-color: var(--borda);
  color: var(--texto);
  font-weight: 600;
}
.aba .cont {
  display: inline-block;
  margin-left: 7px;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  color: var(--texto-fraco);
  border-radius: 9px;
  padding: 0 6px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.aba.ativa .cont { background: var(--marca-clara); color: #fff; border-color: transparent; }

/* ---------------------------------------------------------------- cartões */
/* `width: max-content` COM `flex-wrap: wrap` e uma contradicao: max-content
   significa "larga o bastante para nao quebrar", entao a quebra nunca acontece
   e o bloco estoura a tela. Precisa de largura DEFINIDA para poder quebrar —
   e dentro do `main` (max-content) isso so existe em vw. */
.painel {
  display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0 22px;
  width: var(--largura-util);
}
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 13px 18px;
  min-width: 136px;
  box-shadow: var(--sombra);
}
.cartao .rotulo {
  font-size: 11px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--texto-fraco); font-weight: 600;
}
.cartao .valor { font-size: 26px; font-weight: 600; margin-top: 2px; }
.cartao .valor.menor { font-size: 17px; padding-top: 7px; }
.cartao.destaque { background: var(--marca); border-color: var(--marca); color: #fff; }
.cartao.destaque .rotulo { color: #9fb6cf; }

/* ---------------------------------------------------------------- ferramentas */
.ferramentas {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0 10px; flex-wrap: wrap;
  font-size: 13px; color: var(--texto-fraco);
  position: sticky; left: 28px; width: max-content;
}
.ferramentas input[type="search"], .ferramentas select {
  font: inherit; font-size: 13px; padding: 6px 10px;
  border: 1px solid var(--borda-forte); border-radius: 7px;
  background: var(--superficie); color: var(--texto);
}
.ferramentas input[type="search"] { min-width: 230px; }
.ferramentas label { display: flex; align-items: center; gap: 6px; }
.ferramentas .contador { font-variant-numeric: tabular-nums; }
.ferramentas .dica { font-size: 12.5px; color: var(--cinza); }

button.acao {
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 6px 14px; border-radius: 7px; cursor: pointer;
  background: var(--marca-clara); color: #fff; border: 1px solid transparent;
}
button.acao:hover { filter: brightness(1.1); }
button.acao.secundaria {
  background: var(--superficie); color: var(--texto-fraco);
  border-color: var(--borda-forte);
}

/* ---------------------------------------------------------------- tabelas */
/* ATENÇÃO: nada de `overflow: hidden` aqui. Ele transforma a tabela em contexto
   de rolagem e mata o `position: sticky` do cabeçalho e das colunas fixas — o
   cabeçalho simplesmente sumia ao rolar. O arredondamento é feito nas células
   de canto, não recortando a tabela. */
table {
  border-collapse: separate;
  border-spacing: 0;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
table.simples { width: 100%; }
table thead tr:first-child th:first-child { border-top-left-radius: var(--raio); }
table thead tr:first-child th:last-child  { border-top-right-radius: var(--raio); }
table tbody tr:last-child td:first-child  { border-bottom-left-radius: var(--raio); }
table tbody tr:last-child td:last-child   { border-bottom-right-radius: var(--raio); }

th {
  text-align: left;
  font-size: 11px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--texto-fraco); font-weight: 700;
  padding: 9px 12px;
  background: var(--superficie-2);
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}
td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--borda);
  vertical-align: middle;
  background: var(--superficie);
}
tr:last-child td { border-bottom: 0; }
tr:hover td { background: var(--superficie-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.ordem, th.ordem {
  color: var(--texto-fraco); font-variant-numeric: tabular-nums;
  width: var(--col-ordem); white-space: nowrap;
}

/* ---------------------------------------------------------------- grade */
table.grade { width: max-content; min-width: 100%; }
table.grade td { padding: 3px 8px; }
table.grade td.ordem { padding-left: 12px; }

/* O cabeçalho gruda logo abaixo da barra do topo — não há contêiner de rolagem.
   A altura da barra é medida em JS e publicada em `--altura-topo`, porque ela
   muda com a fonte carregada e com o zoom; número fixo aqui deixava o cabeçalho
   meio escondido atrás da barra. */
table.grade th {
  position: sticky;
  top: var(--altura-topo, 56px);
  z-index: 20;
}
table.grade th.ordenavel { cursor: pointer; user-select: none; }
table.grade th.ordenavel:hover { color: var(--texto); }
table.grade th .seta::after { content: ""; margin-left: 5px; opacity: .55; }
table.grade th.asc  .seta::after { content: "▲"; font-size: 9px; }
table.grade th.desc .seta::after { content: "▼"; font-size: 9px; }

/* as duas primeiras colunas ficam visíveis ao rolar para o lado */
table.grade th.fixa1, table.grade td.fixa1 { position: sticky; left: 0;  z-index: 15; }
table.grade th.fixa2, table.grade td.fixa2 { position: sticky; left: var(--col-ordem); z-index: 15; }
table.grade th.fixa1, table.grade th.fixa2 { z-index: 25; }
table.grade td.fixa1, table.grade td.fixa2 { box-shadow: 1px 0 0 var(--borda); }
table.grade td.fixa2 { box-shadow: 2px 0 4px -2px rgba(16, 24, 40, .16); }

tr.grupo td {
  background: var(--superficie-2) !important;
  font-weight: 600; font-size: 12.5px;
  color: var(--marca-clara);
  padding: 7px 12px;
  border-bottom: 1px solid var(--borda-forte);
  position: sticky; left: 0;
}

/* ---------------------------------------------------------------- células */
.cel {
  font: inherit; font-size: 13.5px;
  padding: 5px 7px;
  border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--texto);
  width: 100%; min-width: 60px;
}
.cel:hover { border-color: var(--borda-forte); background: var(--superficie); }
.cel:focus {
  outline: none; border-color: var(--marca-clara);
  background: var(--superficie);
  box-shadow: 0 0 0 3px rgba(87, 155, 252, .22);
}
.cel.numero { text-align: right; font-variant-numeric: tabular-nums; min-width: 58px; }
.cel.data { min-width: 132px; }
.cel.texto { min-width: 130px; }
.cel.longo { min-width: 230px; }
.cel.erro { border-color: var(--vermelho); background: rgba(226, 68, 92, .12); }
select.cel { min-width: 104px; cursor: pointer; }

/* Selects de status e prioridade são pintados inteiros com a cor do valor.
   `appearance: none` é o que faz a cor tomar o controle todo — sem isso o
   navegador desenha a seta com o seu próprio cinza, e só o fundo fica colorido.
   As regras de cor usam `.pintado[data-valor=…]` (0,2,0) para vencer a
   especificidade de `select.pintado` (0,1,1); com `[data-valor]` solto, o cinza
   padrão ganhava e ainda pintava a célula em vez do botão. */
select.pintado {
  appearance: none;
  -webkit-appearance: none;
  color: #fff;
  font-weight: 600;
  text-align: left;
  border-color: transparent;
  background-color: var(--cinza);
  padding: 5px 24px 5px 10px;
  border-radius: 6px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' d='M1 1.5 6 6.5l5-5' stroke='%23ffffff' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px 7px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .16);
}
select.pintado:hover { filter: brightness(1.08); border-color: transparent; }
select.pintado:focus { box-shadow: 0 0 0 3px rgba(87, 155, 252, .35); }
select.pintado option {
  color: var(--texto); background: var(--superficie);
  font-weight: 400; text-shadow: none;
}

.pintado[data-valor="concluido"], .pintado[data-valor="coletado"],
.pintado[data-valor="recebido"], .pintado[data-valor="resolvido"] {
  background-color: var(--verde);
}
.pintado[data-valor="em_andamento"], .pintado[data-valor="em_analise"],
.pintado[data-valor="parcial"], .pintado[data-valor="em_tratamento"],
.pintado[data-valor="media"] { background-color: var(--laranja); }
.pintado[data-valor="alta"], .pintado[data-valor="nao_localizado"],
.pintado[data-valor="em_aberto"] { background-color: var(--vermelho); }
.pintado[data-valor="aguardando"], .pintado[data-valor="pendente"] { background-color: var(--azul); }
.pintado[data-valor="baixa"] { background-color: var(--azul-escuro); }
.pintado[data-valor="nao_aplicavel"], .pintado[data-valor="cancelado"],
.pintado[data-valor="descartado"] { background-color: var(--cinza); }
.pintado[data-valor="kickoff"], .pintado[data-valor="inicial"] { background-color: var(--roxo); }
.pintado[data-valor="proposta"] { background-color: var(--azul); }
.pintado[data-valor="suplementar"], .pintado[data-valor="padrao"],
.pintado[data-valor="trimestral"] { background-color: var(--azul-escuro); }
.pintado[data-valor="personalizado"], .pintado[data-valor="semestral"] { background-color: var(--roxo); }
.pintado[data-valor="mensal"] { background-color: var(--azul); }
/* natureza da demanda: projeto recorrente em verde, demanda pontual em azul */
.pintado[data-valor="projeto"] { background-color: var(--verde); }
.pintado[data-valor="pontual"] { background-color: var(--azul); }
.pintado[data-valor="anual"] { background-color: var(--laranja); }

/* sem valor: fica neutro, sem fingir status que não existe */
.pintado[data-valor=""] {
  background-color: transparent;
  color: var(--texto-fraco);
  font-weight: 400;
  border-color: var(--borda);
  text-shadow: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23808a97' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* faixa colorida à esquerda da linha, pelo status */
tr[data-cor] td.fixa1 { border-left: 4px solid var(--cinza); }
tr[data-cor="ok"] td.fixa1 { border-left-color: var(--verde); }
tr[data-cor="andamento"] td.fixa1 { border-left-color: var(--laranja); }
tr[data-cor="atraso"] td.fixa1 { border-left-color: var(--vermelho); }
tr[data-cor="parado"] td.fixa1 { border-left-color: var(--azul); }
tr[data-cor="na"] td.fixa1 { border-left-color: var(--cinza); }

tr.excluido td { opacity: .5; }
tr.salvo td { animation: piscar 1.1s ease-out; }
@keyframes piscar {
  from { background: rgba(0, 200, 117, .22); }
  to   { background: transparent; }
}

/* ---------------------------------------------------------------- progresso */
.barra { display: flex; align-items: center; gap: 9px; min-width: 140px; }
.barra .trilho {
  flex: 1; height: 7px; background: var(--borda);
  border-radius: 4px; overflow: hidden; min-width: 60px;
}
/* Faixas de cor da barra, definidas em motor/colunas.py. `zero` é cinza de
   propósito: 0% não é mau desempenho, é trabalho que não começou — pintar de
   vermelho um projeto recém-aberto dá alarme falso todo dia. */
.barra .preenchido {
  height: 100%; background: var(--cinza);
  border-radius: 4px; transition: width .2s, background-color .2s;
}
.barra .preenchido.faixa-indefinido { background: transparent; }
.barra .preenchido.faixa-zero     { background: var(--cinza); }
.barra .preenchido.faixa-critico  { background: var(--vermelho); }
.barra .preenchido.faixa-baixo    { background: var(--laranja); }
.barra .preenchido.faixa-medio    { background: var(--azul); }
.barra .preenchido.faixa-alto     { background: var(--azul-escuro); }
.barra .preenchido.faixa-completo { background: var(--verde); }
/* atraso vence a faixa: prazo estourado importa mais que percentual */
.barra .preenchido.atraso { background: var(--vermelho); }
.barra .pct {
  font-variant-numeric: tabular-nums; font-size: 13px;
  min-width: 40px; text-align: right; color: var(--texto-fraco);
}

/* ---------------------------------------------------------------- pílulas */
.pill {
  display: inline-block; padding: 3px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap; color: #fff;
  background: var(--cinza);
}
.pill.ok { background: var(--verde); }
.pill.andamento { background: var(--laranja); }
.pill.atraso { background: var(--vermelho); }
.pill.parado { background: var(--azul); }
.pill.na { background: var(--cinza); }

.tag-natureza {
  font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--texto-fraco); border: 1px solid var(--borda-forte);
  border-radius: 5px; padding: 2px 7px; white-space: nowrap;
}

a.abrir {
  display: inline-block; min-width: 24px; padding: 2px 6px;
  border: 1px solid var(--borda); border-radius: 6px; text-align: center;
  color: var(--marca-clara); background: var(--superficie);
  font-variant-numeric: tabular-nums; font-size: 13px;
}
a.abrir:hover { background: var(--marca-clara); color: #fff; border-color: transparent; text-decoration: none; }

/* Lixeira desenhada em SVG, não o "×": o × parecia fechar a linha, e não
   apagá-la. `currentColor` deixa o ícone seguir a cor do hover. */
button.excluir {
  background: transparent; border: 1px solid transparent; color: var(--cinza);
  border-radius: 6px; cursor: pointer; line-height: 0;
  padding: 5px 7px;
}
button.excluir::before {
  content: ""; display: block; width: 15px; height: 15px;
  background-color: currentColor;
  -webkit-mask: var(--icone-lixeira) center / contain no-repeat;
  mask: var(--icone-lixeira) center / contain no-repeat;
}
button.excluir:hover { background: rgba(226, 68, 92, .14); color: var(--vermelho); border-color: rgba(226, 68, 92, .35); }

/* ---------------------------------------------------------------- diversos */
.aviso {
  background: rgba(253, 171, 61, .14);
  border: 1px solid rgba(253, 171, 61, .4);
  color: var(--texto);
  padding: 11px 15px; border-radius: var(--raio);
  font-size: 13.5px; margin-bottom: 18px; max-width: 880px;
}
.vazio {
  color: var(--texto-fraco); padding: 34px; text-align: center;
  background: var(--superficie); border: 1px dashed var(--borda-forte);
  border-radius: var(--raio); max-width: 880px;
}

/* ---------------------------------------------------------------- formulário */
.formulario {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px 20px; max-width: 1100px;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 20px 22px; box-shadow: var(--sombra);
}
.formulario .campo { display: flex; flex-direction: column; gap: 5px; }
.formulario label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--texto-fraco); font-weight: 700;
}
.formulario input, .formulario select, .formulario textarea {
  font: inherit; font-size: 14px; padding: 8px 10px;
  border: 1px solid var(--borda-forte); border-radius: 7px;
  background: var(--fundo); color: var(--texto);
}
.formulario input:focus, .formulario select:focus, .formulario textarea:focus {
  outline: none; border-color: var(--marca-clara);
  box-shadow: 0 0 0 3px rgba(87, 155, 252, .2);
}
.formulario .largo { grid-column: 1 / -1; }
.secao { font-size: 13px; font-weight: 700; color: var(--marca-clara);
         text-transform: uppercase; letter-spacing: .8px; margin: 26px 0 10px; }

/* ---------------------------------------------------------------- execuções */
table.execucoes td.mes { padding: 3px 4px; text-align: center; }
button.marca {
  width: 34px; height: 28px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--borda); background: var(--superficie);
  color: var(--texto-fraco); font-size: 14px; line-height: 1;
}
button.marca[data-estado="feito"] { background: var(--verde); border-color: transparent; color: #fff; }
button.marca[data-estado="nao_feito"] { background: var(--vermelho); border-color: transparent; color: #fff; }
button.marca[data-estado="nao_aplicavel"] { background: var(--cinza); border-color: transparent; color: #fff; }
button.marca:hover { filter: brightness(1.08); }

/* ============================================================ subitens
   Expansão da linha, no espírito do Monday: um clique abre os subitens
   dentro da própria grade; dois cliques no número abrem a página inteira.
   A tabela aninhada não repete as colunas grudadas — a página inteira já
   rola, e sticky dentro de sticky embaralha as camadas. */

td.ordem { white-space: nowrap; }

button.caret {
  border: 0; background: transparent; cursor: pointer;
  color: var(--texto-fraco);
  width: 18px; height: 18px; padding: 0; margin-right: 2px;
  border-radius: 4px; vertical-align: middle;
  line-height: 1;
}
button.caret::before {
  content: "▸"; display: inline-block; font-size: 11px;
  transition: transform .12s ease;
}
button.caret:hover { background: var(--borda); color: var(--texto); }
button.caret[aria-expanded="true"]::before { transform: rotate(90deg); }

tr.filhos > td {
  padding: 0 0 0 34px;
  background: var(--superficie-2);
  border-bottom: 1px solid var(--borda-forte);
}

.bloco-filhos { padding: 10px 12px 14px 0; }
.bloco-filhos .cabeca {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 0 8px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--texto-fraco); font-weight: 700;
}
.bloco-filhos .cabeca .cont {
  background: var(--borda); color: var(--texto);
  border-radius: 10px; padding: 1px 7px;
  font-size: 11px; letter-spacing: 0;
}
/* O "+ nova linha" do bloco aninhado. Discreto ate o mouse chegar: em uma
   tela com cinco niveis abertos, cinco botoes chapados competiriam com o
   dado. */
button.acao.menor {
  font-size: 11px; padding: 3px 9px; letter-spacing: 0;
  text-transform: none; font-weight: 600;
  background: transparent; color: var(--texto-fraco);
  border: 1px solid var(--borda);
}
button.acao.menor:hover {
  filter: none; color: var(--texto); border-color: var(--acento);
}
.bloco-filhos .vazio { margin: 0; }

/* Sem `overflow: hidden` aqui tambem. Nesta tabela nao ha sticky (o cabecalho
   e static e as colunas fixas nao sao emitidas), mas a regra da casa vale: o
   dia em que alguem ligar sticky aqui, nao vai caçar o motivo de novo. */
table.grade.aninhada {
  border: 1px solid var(--borda);
  background: var(--superficie);
}
/* o cabeçalho da aninhada não gruda: quem gruda é o da grade de cima */
table.grade.aninhada th { position: static; font-size: 10.5px; }
table.grade.aninhada td { background: var(--superficie); }

.carregando { padding: 12px 2px; color: var(--texto-fraco); font-size: 13px; }
.carregando.erro { color: var(--vermelho); }

/* ============================================================ redimensionar
   Arrastar a borda direita do cabeçalho, como no Excel e no Monday. A largura
   escolhida é preferência de quem olha, não dado do projeto: fica no navegador. */

/* Nada de `position: relative` no th: ele já é `sticky`, que também serve de
   referência para o `absolute` da pega. Declarar `relative` aqui derrubava o
   sticky e soltava o cabeçalho no meio da grade ao rolar. */
th .pega {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 7px; cursor: col-resize;
  user-select: none;
}
th .pega:hover, body.redimensionando th .pega:active {
  background: var(--marca-clara);
  opacity: .55;
}
body.redimensionando { cursor: col-resize; user-select: none; }
body.redimensionando .cel { pointer-events: none; }

/* coluna com largura escolhida à mão: o texto corta em vez de esticar a coluna */
td.redim { overflow: hidden; }
td.redim .cel { min-width: 0; width: 100%; }

/* ============================================================ fechamentos
   Um período por vez: filtro no topo, painel de contagens, cabeçalho do
   fechamento e os apontamentos agrupados por Eixo de Análise. */

.filtros-periodo label { font-weight: 600; }

.cabeca-fechamento {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 16px 0 18px;
}
.cabeca-fechamento .titulo {
  font-size: 13px; font-weight: 700;
  color: var(--texto);
  margin-bottom: 12px;
}
.cabeca-fechamento .campos {
  display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: flex-end;
}
.cabeca-fechamento .campo { display: flex; flex-direction: column; gap: 5px; }
.cabeca-fechamento .campo .rot {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--texto-fraco); font-weight: 700;
}
/* `:not(.pintado)`: o atalho `background` apagava a cor do select de status,
   que é justamente o que faz dele uma pílula colorida. */
.cabeca-fechamento .campo .cel:not(.pintado) {
  border-color: var(--borda);
  background: var(--superficie-2);
}
/* a observação do fechamento ocupa o resto da linha */
.cabeca-fechamento .campo:last-child { flex: 1; min-width: 260px; }

.grupo-eixo { margin-bottom: 22px; }
.grupo-eixo > .cabeca {
  display: flex; align-items: center; gap: 9px;
  padding: 0 0 8px 2px;
  font-size: 12px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--marca-clara); font-weight: 700;
}
.grupo-eixo > .cabeca .cont {
  background: var(--borda); color: var(--texto);
  border-radius: 10px; padding: 1px 8px;
  font-size: 11px; letter-spacing: 0; text-transform: none;
}
/* Sem `overflow: hidden` — ver o aviso no alto desta folha. Esta tabela tem
   cabeçalho e primeiras colunas `sticky`, e o overflow faria dela um contexto
   de rolagem, matando os dois. A borda fica sem arredondar mesmo. */
.grupo-eixo table.grade { border: 1px solid var(--borda); }

/* ============================================================ dashboard
   Tela de leitura: nenhum controle editável, nenhuma coluna arrastável.
   Se aparecer um `input` aqui, alguém quebrou a regra do painel. */

h2.secao {
  font-size: 15px; font-weight: 700;
  letter-spacing: .4px; text-transform: uppercase;
  color: var(--texto-fraco);
  margin: 30px 0 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--borda);
  width: max-content; min-width: 100%;
}

.blocos {
  display: flex; gap: 16px; flex-wrap: wrap;
  align-items: flex-start;
  margin-bottom: 6px;
  width: var(--largura-util);
}
.bloco {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 15px 17px 17px;
  box-shadow: var(--sombra);
  min-width: 340px;
}
.bloco.largo { min-width: 620px; flex: 1; }
.bloco h3 {
  font-size: 13px; font-weight: 700; margin: 0 0 12px;
  display: flex; align-items: baseline; gap: 12px;
}
.bloco h3 .ver-tudo { font-size: 12px; font-weight: 400; }
.bloco .vazio { margin: 0; }

/* sem `overflow` e sem sticky: tabela de leitura, a pagina inteira rola */
/* `main` e `width: max-content` para a grade larga poder rolar de lado. Isso
   torna a largura do pai INDEFINIDA, e dentro dela `width: 100%` resolve
   contra o conteudo (a tabela encolhia e Milestones ficava espremida) e uma
   porcentagem numa coluna entra em laco — 26189px de largura numa tentativa.
   A saida nao e brigar com o `max-content`: e dar ao bloco da tabela uma
   largura DEFINIDA, em vw. A partir dai `100%` e `table-layout: fixed`
   funcionam como em qualquer pagina normal. */
/* A largura util da pagina: a janela menos a lateral e o respiro do `main`.
   Uma variavel so, porque tres lugares precisavam do mesmo numero e mante-los
   em sincronia a mao e como o numero sai de sincronia. */
/* `--largura-util` e MEDIDA em JS a partir do espaco que o `.corpo` realmente
   tem, nao calculada a partir da janela menos a lateral.
   
   Calcular duplicava o que o CSS ja sabe: era preciso lembrar de qual variavel
   da lateral usar (aberta ou recolhida), e o `100vw` ainda incluia a barra de
   rolagem, que o conteudo nao tem. Duas fontes para o mesmo numero, e elas
   saiam de sincronia. Medindo, o valor esta sempre certo — inclusive no
   instante em que a lateral recolhe. */
:root { --largura-util: calc(100vw - var(--lateral) - 56px); }

.faixa-larga { width: var(--largura-util); max-width: var(--largura-util); }
/* `width: 100%` AQUI E VENENO, e ja custou uma vez: `main` e `width:
   max-content`, entao a porcentagem realimenta o calculo e a tabela cresce sem
   parar — um `th` de `min-width: 260px` chegou a renderizar com 499518px no
   Dashboard. Largura em porcentagem so pode existir dentro de `.faixa-larga`,
   que tem largura DEFINIDA em vw.

   Sem `.faixa-larga`, a tabela se dimensiona pelo conteudo, que e o
   comportamento certo para as tabelas curtas do Dashboard. */
table.leitura.faixa-larga { width: 100%; table-layout: fixed; }
table.leitura th {
  position: static;
  background: transparent;
  padding: 0 10px 7px;
  border-bottom: 1px solid var(--borda);
}
table.leitura td { padding: 7px 10px; background: transparent; }
table.leitura tr:hover td { background: var(--superficie-2); }
table.leitura .barra { min-width: 120px; }
/* A Carteira ocupa a largura da pagina: com a coluna de Milestones em 230px
   as pilhas empilhavam e cada projeto virava um bloco de quatro linhas.
   `nowrap` mantem uma ao lado da outra; se um dia nao couber, a celula rola
   sozinha em vez de crescer para baixo. */
/* O nome do projeto nao quebra — em duas linhas cada projeto virava um bloco
   em vez de uma linha. Mas SEM largura declarada ele virou a coluna elastica e
   engoliu a sobra da tabela: 921px de nome para 305px de Milestones, que
   precisavam de 323 e rolavam por dentro. `width: 1%` com `nowrap` e o
   contrario disso — pede exatamente o tamanho do conteudo e nada mais, e
   quem fica com a sobra e a unica coluna sem largura, Milestones. */
/* O nome do projeto nao quebra: em duas linhas cada projeto virava um bloco em
   vez de uma linha. Largura em px (nao %), porque a coluna cabe o maior nome
   da carteira e o resto e sobra para Milestones. */
table.leitura th.nome-projeto { width: 290px; }
table.leitura td.nome-projeto { white-space: nowrap; }
/* SEM `overflow-x`: a barra de rolagem dentro da celula escondia justamente o
   que a coluna existe para mostrar. Como agora sao no maximo tres tags (e as
   concluidas nem aparecem), o conteudo cabe — e se um dia nao couber, o "+N"
   diz quantas ficaram de fora, em vez de esconder atras de um scroll. */
table.leitura td.marcos { white-space: nowrap; }
table.leitura td.marcos .pill { margin-right: 5px; }

.cartao.alarme {
  border-color: var(--vermelho);
  box-shadow: inset 3px 0 0 var(--vermelho), var(--sombra);
}
.cartao.alarme .valor { color: var(--vermelho); }

ul.lista-seca { list-style: none; margin: 0; padding: 0; }
ul.lista-seca li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--borda);
  font-size: 13.5px;
}
ul.lista-seca li:last-child { border-bottom: 0; }
ul.lista-seca .txt { flex: 1; min-width: 0; }
ul.lista-seca .meta { color: var(--texto-fraco); font-size: 12.5px; white-space: nowrap; }


/* ============================================================ logo do cliente */
/* ------------------------------------------------------- topo da Capa */
/* A logo abre a pagina, ao lado do titulo. Estava la embaixo, entre os campos
   de cadastro, e quem abria o projeto nao via de quem ele era. */
.capa-topo { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.capa-topo .capa-titulo { min-width: 0; }
.capa-topo .capa-titulo p.legenda { margin-bottom: 0; }
label.alvo-logo-topo {
  width: 104px; height: 104px; flex: none; cursor: pointer;
  border-radius: 14px; border: 1px solid var(--borda);
  background: var(--superficie);
  display: flex; align-items: center; justify-content: center;
  padding: 10px; position: relative; overflow: hidden;
  transition: border-color .12s;
}
label.alvo-logo-topo:hover { border-color: var(--acento); }
label.alvo-logo-topo img { max-width: 100%; max-height: 100%; object-fit: contain; }
label.alvo-logo-topo.vazia { border-style: dashed; flex-direction: column; gap: 2px; }
label.alvo-logo-topo .inicial {
  font-size: 34px; font-weight: 700; color: var(--texto-fraco); line-height: 1;
}
label.alvo-logo-topo .por-logo { font-size: 11px; color: var(--texto-fraco); }

.caixa-plano {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 12px 0 8px; padding: 12px 14px;
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--superficie);
}
.caixa-plano .qual { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.caixa-plano .qual .legenda { margin: 0; font-size: 13px; }

.caixa-logo { display: flex; gap: 18px; align-items: center; margin: 14px 0 6px; }
.caixa-logo.sem-alvo { margin-top: 6px; }
.caixa-logo .alvo {
  width: 150px; height: 84px; flex: none;
  border: 1px dashed var(--borda-forte); border-radius: var(--raio);
  background: var(--superficie);
  display: flex; align-items: center; justify-content: center;
  padding: 8px;
}
.caixa-logo .alvo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.caixa-logo .sem-logo { color: var(--texto-fraco); font-size: 12.5px; }
.caixa-logo .controles { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* `label` com cara de botão: o input de arquivo nativo não aceita estilo */
.caixa-logo label.acao { display: inline-block; }

a.com-logo { display: flex; align-items: center; gap: 10px; }
.logo-mini {
  width: 26px; height: 26px; flex: none; border-radius: 5px;
  object-fit: contain; background: var(--superficie-2);
}
/* sem logo: a inicial do cliente, para a coluna não dançar de altura */
.logo-mini.vazia {
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--texto-fraco);
  border: 1px solid var(--borda);
}

/* ------------------------------------------------------- arquivo da tela */
/* Nao existe "aba de Arquivados": o arquivo e DESTA tela. O botao fica colado
   no campo de busca e aparece SEMPRE, mesmo com zero — some e o usuario passa
   a procurar uma tela que nunca existiu, que foi exatamente o que aconteceu. */
a.ver-arquivadas {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 8px;
  border: 1px solid var(--borda); background: transparent;
  color: var(--texto-fraco); font-size: 12.5px; text-decoration: none;
  white-space: nowrap;
}
a.ver-arquivadas::before {
  content: ""; width: 14px; height: 14px; flex: none;
  background-color: currentColor;
  -webkit-mask: var(--icone-arquivo) center / contain no-repeat;
  mask: var(--icone-arquivo) center / contain no-repeat;
}
a.ver-arquivadas:hover { color: var(--texto); border-color: var(--borda-forte); }
a.ver-arquivadas.vendo {
  color: var(--marca-clara); border-color: var(--marca-clara);
  background: rgba(87, 155, 252, .10);
}
a.ver-arquivadas .n {
  background: var(--borda); color: var(--texto);
  border-radius: 9px; padding: 0 6px; font-size: 11px; font-weight: 700;
}
a.ver-arquivadas.zero { opacity: .55; }

/* O simbolo de link na linha: sempre visivel, ao contrario do botao da ficha,
   porque a informacao e "existe anexo aqui" — e ela so serve antes de abrir. */
span.tem-link { font-size: 11px; opacity: .8; margin-left: 1px; cursor: default; }

/* ------------------------------------------------- contagem de subitens */
/* O numero de subitens ao lado da seta, na propria linha: a bolinha que ja
   existia so aparecia DEPOIS de expandir, e para saber se valia expandir era
   preciso expandir. */
span.n-filhos {
  display: inline-block; min-width: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--borda); color: var(--texto-fraco);
  font-size: 10px; font-weight: 700; line-height: 15px; text-align: center;
  vertical-align: middle; margin-left: 1px;
}
tr:hover span.n-filhos { color: var(--texto); }

/* ============================================================ seleção em massa */
td.ordem input.marcar, th.ordem input.marcar-todas {
  accent-color: var(--marca-clara);
  margin-right: 6px; vertical-align: middle; cursor: pointer;
}
th.ordem .cerquilha { vertical-align: middle; }
/* a linha marcada fica evidente sem competir com a faixa de status */
tr:has(input.marcar:checked) td { background: rgba(87, 155, 252, .10); }

#barra-selecao {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(140%);
  display: flex; align-items: center; gap: 12px;
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borda-forte); border-radius: 999px;
  padding: 9px 14px 9px 20px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .28);
  z-index: 60; font-size: 13.5px;
  transition: transform .16s ease, opacity .16s ease;
  opacity: 0; pointer-events: none;
}
#barra-selecao.visivel {
  transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto;
}
#barra-selecao .quantas { font-weight: 600; white-space: nowrap; }


/* ============================================================ ações da linha
   Ficam na coluna grudada, e aparecem no hover: visíveis o tempo todo elas
   competiriam com o número da linha e convidariam ao clique errado. */
/* As duas colunas de ação: últimas da tabela e grudadas na direita, para
   ficarem no fim sem sair do alcance numa grade de 2700px. Discretas, mas
   sempre visíveis — só no hover seriam invisíveis para quem não usa mouse. */
td.acao-linha, th.acao-linha {
  width: var(--col-acao); padding: 3px 4px; text-align: center;
}
table.grade th.acao-linha, table.grade td.acao-linha {
  position: sticky; z-index: 15;
  box-shadow: -1px 0 0 var(--borda);
}
table.grade th.acao-linha { z-index: 25; }
table.grade .fixa-dir1 { right: 0; }
table.grade .fixa-dir2 { right: var(--col-acao); }
table.grade td.acao-linha { background: var(--superficie); }
tr:hover td.acao-linha { background: var(--superficie-2); }
td.acao-linha button { opacity: .5; transition: opacity .12s; }
tr:hover td.acao-linha button,
tr:focus-within td.acao-linha button,
tr.arquivado td.acao-linha button { opacity: 1; }

/* a seta agora também abre a página: dois cliques */
button.caret.abrir { cursor: pointer; }
a.abrir.so-abrir { padding: 0 4px; }

button.arquivar {
  background: transparent; border: 1px solid transparent; color: var(--cinza);
  border-radius: 6px; cursor: pointer; line-height: 0; padding: 5px 6px;
}
button.arquivar::before {
  content: ""; display: block; width: 15px; height: 15px;
  background-color: currentColor;
  -webkit-mask: var(--icone-arquivo) center / contain no-repeat;
  mask: var(--icone-arquivo) center / contain no-repeat;
}
button.arquivar:hover {
  background: rgba(87, 155, 252, .16); color: var(--marca-clara);
  border-color: rgba(87, 155, 252, .4);
}

/* linha arquivada: presente, legível, e obviamente fora do jogo */
tr.arquivado td { opacity: .55; }
tr.arquivado td.fixa1 { border-left-color: var(--cinza) !important; }
tr.arquivado .abrir, tr.arquivado .n { text-decoration: line-through; }

/* ============================================================ caixas de seleção
   A caixa nativa é um retângulo branco que berra no tema escuro. Esta segue a
   superfície da página e só acende no azul da marca quando marcada. */
td.ordem input.marcar, th.ordem input.marcar-todas,
label.chave input.marcar {
  appearance: none; -webkit-appearance: none;
  width: 15px; height: 15px; flex: none;
  border: 1.5px solid var(--borda-forte); border-radius: 4px;
  background: var(--superficie);
  vertical-align: middle; margin-right: 5px; cursor: pointer;
  position: relative; transition: background-color .12s, border-color .12s;
}
td.ordem input.marcar:hover, th.ordem input.marcar-todas:hover,
label.chave input.marcar:hover { border-color: var(--marca-clara); }
td.ordem input.marcar:checked, th.ordem input.marcar-todas:checked,
label.chave input.marcar:checked,
th.ordem input.marcar-todas:indeterminate {
  background: var(--marca-clara); border-color: var(--marca-clara);
}
td.ordem input.marcar:checked::after,
label.chave input.marcar:checked::after,
th.ordem input.marcar-todas:checked::after {
  content: ""; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
/* A chave de sim/não das Configurações. Desabilitada quando é o proprio
   usuario: mostrar apagada explica melhor que sumir — some e o usuario procura
   o botao que nunca existiu. */
label.chave { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
label.chave input.marcar:disabled { opacity: .4; cursor: not-allowed; }
label.chave:has(input:disabled) { cursor: not-allowed; color: var(--texto-fraco); }

/* seleção parcial no cabeçalho: um traço, não um check */
th.ordem input.marcar-todas:indeterminate::after {
  content: ""; position: absolute; left: 2.5px; top: 5.5px;
  width: 7px; height: 0; border-top: 2px solid #fff;
}
input.marcar:focus-visible, input.marcar-todas:focus-visible {
  outline: 2px solid var(--marca-clara); outline-offset: 2px;
}

/* ============================================================ diálogo */
.cortina {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0, 0, 0, .5);
  display: flex; align-items: center; justify-content: center;
}
.dialogo {
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borda-forte); border-radius: 12px;
  padding: 20px 22px; width: min(560px, 92vw);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .4);
}
.dialogo h3 { margin: 0 0 6px; font-size: 15px; }
.dialogo .legenda { margin-bottom: 14px; }
.dialogo select {
  width: 100%; font: inherit; font-size: 13.5px;
  padding: 6px; border-radius: 8px;
  border: 1px solid var(--borda-forte);
  background: var(--superficie-2); color: var(--texto);
}
.dialogo select optgroup { color: var(--texto-fraco); font-style: normal; }
.dialogo select option { color: var(--texto); padding: 3px 6px; }
.dialogo .botoes { display: flex; gap: 10px; margin-top: 16px; justify-content: flex-end; }
.dialogo .campo-dialogo { display: block; margin-bottom: 12px; }
.dialogo .campo-dialogo span {
  display: block; margin-bottom: 5px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--texto-fraco); font-weight: 700;
}
.dialogo .campo-dialogo input {
  width: 100%; font: inherit; font-size: 13.5px;
  padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--borda-forte);
  background: var(--superficie-2); color: var(--texto);
}
.dialogo .campo-dialogo input:focus {
  outline: none; border-color: var(--acento);
}
.dialogo .campo-dialogo input.erro,
.dialogo .campo-dialogo select.erro { border-color: var(--vermelho); }
.dialogo .campo-dialogo select {
  width: 100%; font: inherit; font-size: 13.5px;
  padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--borda-forte);
  background: var(--superficie-2); color: var(--texto);
}
/* a explicacao da opcao escolhida: escolher plano sem ver o que ele inclui e
   escolher no escuro */
.dialogo .ajuda-dialogo {
  display: block; margin-top: 5px;
  font-size: 12px; color: var(--texto-fraco); line-height: 1.4;
}
button.acao.perigo { background: var(--vermelho); color: #fff; }

/* O link da coluna Origem: leva a acao ate o milestone (ou demanda, achado,
   reuniao) de onde ela veio. Discreto, para nao competir com a descricao. */
a.para-origem {
  display: block; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--texto-fraco); text-decoration: none;
  border-bottom: 1px dotted transparent;
}
a.para-origem:hover { color: var(--acento); border-bottom-color: currentColor; }

/* ============================================================ busca global */
.busca { position: relative; }
.busca input[type="search"] {
  font: inherit; font-size: 13px; width: 300px; max-width: 34vw;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .1); color: #fff;
}
.busca input[type="search"]::placeholder { color: #9fb6cf; }
.busca input[type="search"]:focus {
  outline: none; background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .5);
}
.busca .resultados {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: min(560px, 84vw); max-height: 66vh; overflow-y: auto;
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borda-forte); border-radius: 10px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
  z-index: 70;
}
.busca .resultados .cabeca {
  padding: 9px 14px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .7px;
  color: var(--texto-fraco); border-bottom: 1px solid var(--borda);
}
.busca .resultados .nada { padding: 14px; font-size: 13.5px; color: var(--texto-fraco); }
.busca .resultados .item {
  display: grid; grid-template-columns: 92px 1fr; gap: 2px 10px;
  padding: 9px 14px; border-bottom: 1px solid var(--borda);
  text-decoration: none; color: var(--texto); font-size: 13.5px;
}
.busca .resultados .item:last-child { border-bottom: 0; }
.busca .resultados .item:hover { background: var(--superficie-2); text-decoration: none; }
.busca .resultados .tipo {
  grid-row: span 2; align-self: start;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--marca-clara);
  border: 1px solid var(--borda); border-radius: 6px;
  padding: 2px 6px; text-align: center;
}
.busca .resultados .txt { line-height: 1.35; }
.busca .resultados .meta { font-size: 12px; color: var(--texto-fraco); }

/* ============================================================ portão de entrada */
/* O portao fica centrado na TELA, nao colado no topo. `8vh` deixava o cartao
   alto e o rodape solto la embaixo, com um vazio no meio que nao era de
   ninguem. O `main` da pagina de login vira uma caixa que centra nos dois
   eixos, descontando as barras fixas e o rodape. */
body:has(.portao) main {
  /* `width: 100%` explicito: o `main` e `width: max-content` (para a grade
     larga rolar de lado), e num contêiner que encolhe ate o conteudo
     `justify-content: center` nao tem o que centrar — o cartao ficava colado
     numa das bordas. Aqui nao ha grade, entao a largura cheia e a certa. */
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  min-height: calc(100vh - var(--altura-topo, 56px) - 130px);
}
.portao {
  max-width: 380px; margin: 0 auto;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 12px; padding: 30px 32px 26px;
  box-shadow: var(--sombra);
}
.portao h1 { font-size: 19px; margin-bottom: 6px; }
.portao .formulario { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.portao .formulario label { display: flex; flex-direction: column; gap: 6px; }
.portao .formulario label span {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .7px; color: var(--texto-fraco);
}
.portao .formulario input {
  font: inherit; font-size: 14px; padding: 9px 12px;
  border: 1px solid var(--borda-forte); border-radius: 8px;
  background: var(--superficie-2); color: var(--texto);
}
.portao .formulario input:focus {
  outline: none; border-color: var(--marca-clara);
  box-shadow: 0 0 0 3px rgba(87, 155, 252, .22);
}
.portao .formulario button { margin-top: 4px; padding: 10px; font-size: 14px; }
.portao .rodape { margin: 18px 0 0; font-size: 12.5px; }
.aviso.erro {
  background: rgba(226, 68, 92, .12);
  border-color: rgba(226, 68, 92, .45);
  margin: 16px 0 0; max-width: none;
}
header.topo .quem { color: #9fb6cf; font-size: 12.5px; white-space: nowrap; }
header.topo a.sair {
  color: #fff; font-size: 12.5px; white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px;
  padding: 4px 12px;
}
header.topo a.sair:hover { background: rgba(255, 255, 255, .18); text-decoration: none; }

/* ============================================================ equipe */
.equipe { display: flex; flex-wrap: wrap; gap: 9px; margin: 14px 0 6px; }
.cracha {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--borda); border-radius: 999px;
  padding: 6px 14px; font-size: 13.5px;
  background: var(--superficie); cursor: pointer;
}
.cracha input { accent-color: var(--marca-clara); cursor: pointer; }
.cracha input:disabled { cursor: default; }
.cracha.dentro { border-color: var(--marca-clara); background: rgba(87, 155, 252, .12); }
.cracha.master { cursor: default; border-style: dashed; color: var(--texto-fraco); }
.cracha.master em {
  font-style: normal; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; color: var(--marca-clara);
}

/* ============================================================ fatias do CRM */
.fatias { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px;
          width: max-content; }
.fatia {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--borda); border-radius: 999px;
  padding: 5px 13px; font-size: 13px; color: var(--texto-fraco);
  background: var(--superficie); text-decoration: none;
}
.fatia:hover { border-color: var(--borda-forte); color: var(--texto); text-decoration: none; }
.fatia.ativa {
  border-color: var(--marca-clara); color: var(--texto);
  background: rgba(87, 155, 252, .14); font-weight: 600;
}
.fatia .n {
  background: var(--borda); border-radius: 9px; padding: 0 6px;
  font-size: 11.5px; font-variant-numeric: tabular-nums;
}

/* cores das etiquetas do CRM */
.pintado[data-valor="cliente"] { background-color: var(--verde); }
.pintado[data-valor="parceiro"] { background-color: var(--roxo); }
.pintado[data-valor="contador_advogado"] { background-color: var(--azul-escuro); }
.pintado[data-valor="instituicao_financeira"] { background-color: var(--azul); }
.pintado[data-valor="prospect"] { background-color: var(--cinza); }
.pintado[data-valor="novo"] { background-color: var(--azul); }
.pintado[data-valor="contatado"] { background-color: var(--azul-escuro); }
.pintado[data-valor="qualificado"] { background-color: var(--roxo); }
.pintado[data-valor="proposta"] { background-color: var(--laranja); }
.pintado[data-valor="ganho"] { background-color: var(--verde); }
.pintado[data-valor="perdido"] { background-color: var(--vermelho); }
.pintado[data-valor="sem_evolucao"] { background-color: var(--cinza); }
header.topo .modulos { display: flex; gap: 4px; }
header.topo .modulos a {
  color: #9fb6cf; font-size: 13.5px; padding: 4px 12px; border-radius: 7px;
}
header.topo .modulos a:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
a.ir-projeto, button.abrir-projeto {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--borda-forte); background: var(--superficie);
  color: var(--texto-fraco); cursor: pointer; margin-left: 4px;
  white-space: nowrap; line-height: 1.5;
}
a.ir-projeto { color: var(--marca-clara); border-color: var(--marca-clara); text-decoration: none; }
button.abrir-projeto:hover { border-color: var(--verde); color: var(--verde); }

/* ============================================================ menu lateral
   Navegação entre módulos, no espírito do Monday: ícone sempre, rótulo quando
   expandida. Os ícones são máscaras SVG, então seguem a cor do estado — um
   arquivo de imagem por ícone não acompanharia o tema escuro nem o ativo. */
:root {
  --lateral: 188px;
  --lateral-recolhida: 56px;
  --icone-pasta: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a1 1 0 0 1 1-1h5l2 2h8a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
  --icone-predio: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v16M15 21V10h4a1 1 0 0 1 1 1v10M2 21h20M8 8h3M8 12h3M8 16h3'/%3E%3C/svg%3E");
  --icone-pessoa: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20a7 7 0 0 1 14 0'/%3E%3C/svg%3E");
  --icone-funil: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h18l-7 8v6l-4 2v-8z'/%3E%3C/svg%3E");
  --icone-engrenagem: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-1.8-.3 1.6 1.6 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.6 1.6 0 0 0-1-1.5 1.6 1.6 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.6 1.6 0 0 0 .3-1.8 1.6 1.6 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.6 1.6 0 0 0 1.5-1 1.6 1.6 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.6 1.6 0 0 0 1.8.3H9a1.6 1.6 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.6 1.6 0 0 0 1 1.5 1.6 1.6 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0-.3 1.8V9a1.6 1.6 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1z'/%3E%3C/svg%3E");
  --icone-menu: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
}

nav.lateral {
  /* abaixo das DUAS barras fixas — o topo e a trilha */
  position: fixed; left: 0; bottom: 0;
  top: calc(var(--altura-topo, 56px) + var(--altura-trilha, 0px));
  width: var(--lateral);
  background: var(--superficie); border-right: 1px solid var(--borda);
  padding: 10px 8px; z-index: 30;
  display: flex; flex-direction: column; gap: 3px;
  transition: width .14s ease;
}
:root.lateral-recolhida nav.lateral { width: var(--lateral-recolhida); }

/* o conteúdo abre espaço para a lateral em vez de ficar por baixo dela */
.corpo { margin-left: var(--lateral); transition: margin-left .14s ease; }
:root.lateral-recolhida .corpo { margin-left: var(--lateral-recolhida); }
/* No portao de entrada e na tela de convite NAO existe lateral — a margem
   reservava 188px para um menu que nao esta la, e o cartao de login ficava
   deslocado para a direita em vez de centrado na tela. */
body:not(:has(nav.lateral)) .corpo { margin-left: 0; }

nav.lateral .modulo {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: 8px;
  color: var(--texto-fraco); font-size: 13.5px; text-decoration: none;
  white-space: nowrap; overflow: hidden;
}
nav.lateral .modulo::before {
  content: ""; flex: none; width: 18px; height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--icone) center / contain no-repeat;
  mask: var(--icone) center / contain no-repeat;
}
nav.lateral .modulo[data-icone="pasta"]  { --icone: var(--icone-pasta); }
nav.lateral .modulo[data-icone="predio"] { --icone: var(--icone-predio); }
nav.lateral .modulo[data-icone="pessoa"] { --icone: var(--icone-pessoa); }
nav.lateral .modulo[data-icone="funil"]  { --icone: var(--icone-funil); }
nav.lateral .modulo[data-icone="engrenagem"] { --icone: var(--icone-engrenagem); }
/* Configurações vai para o rodapé da lateral: é ajuste, não trabalho do dia. */
nav.lateral .modulo.rodape { margin-top: auto; }
nav.lateral .modulo:hover {
  background: var(--superficie-2); color: var(--texto); text-decoration: none;
}
nav.lateral .modulo.ativo {
  background: rgba(87, 155, 252, .14); color: var(--marca-clara); font-weight: 600;
}
:root.lateral-recolhida nav.lateral .rotulo { display: none; }
:root.lateral-recolhida nav.lateral .modulo { justify-content: center; padding: 9px; }

nav.lateral .recolher {
  background: transparent; border: 0; cursor: pointer; color: var(--texto-fraco);
  padding: 9px 11px; border-radius: 8px; line-height: 0; margin-bottom: 6px;
  align-self: flex-start;
}
nav.lateral .recolher::before {
  content: ""; display: block; width: 18px; height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--icone-menu) center / contain no-repeat;
  mask: var(--icone-menu) center / contain no-repeat;
}
nav.lateral .recolher:hover { background: var(--superficie-2); color: var(--texto); }
:root.lateral-recolhida nav.lateral .recolher { align-self: center; }

/* a lateral é fixa; o que rola de lado é o conteúdo, e ele não pode passar
   por baixo dela — por isso o `min-width` sai do corpo, e não do body */
.corpo nav.trilha, .corpo main, .corpo header { min-width: 0; }


/* ================================================================== ficha */
/* O quadro de uma linha so. Entra pela direita e nao tira a grade da tela: o
   contexto de onde a linha vive continua visivel atras, que e metade da
   utilidade de abrir a ficha. */
.cortina-ficha {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(0, 0, 0, .35);
}
.painel-ficha {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 71;
  width: min(660px, 94vw);
  background: var(--superficie); border-left: 1px solid var(--borda-forte);
  box-shadow: -18px 0 50px rgba(0, 0, 0, .35);
  overflow-y: auto; padding: 18px 22px 40px;
  animation: entra-ficha .16s ease-out;
}
@keyframes entra-ficha { from { transform: translateX(24px); opacity: .4; } }

.ficha header {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 14px;
}
.ficha .onde {
  flex: 1; font-size: 12px; color: var(--texto-fraco);
  display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
}
.ficha .onde a { color: var(--texto-fraco); text-decoration: none; }
.ficha .onde a:hover { color: var(--acento); text-decoration: underline; }
.ficha .onde .sep { opacity: .5; }
button.fechar-ficha {
  flex: none; width: 28px; height: 28px; line-height: 1;
  font-size: 20px; border-radius: 8px;
  background: transparent; color: var(--texto-fraco);
  border: 1px solid var(--borda); cursor: pointer;
}
button.fechar-ficha:hover { color: var(--texto); border-color: var(--borda-forte); }

.ficha .titulo-ficha { font-size: 18px; margin: 0 0 16px; font-weight: 600; }
.ficha .aviso-arquivado {
  margin: 0 0 14px; padding: 8px 11px; border-radius: 8px;
  background: var(--superficie-2); border: 1px solid var(--borda);
  color: var(--texto-fraco); font-size: 12.5px;
}

.ficha .campos-ficha {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px;
}
.ficha .campo-ficha { display: block; min-width: 0; }
.ficha .campo-ficha.largo, .ficha .campo-ficha.titulo { grid-column: 1 / -1; }
.ficha .campo-ficha.titulo { margin-bottom: 16px; }
.ficha .campo-ficha > span {
  display: block; margin-bottom: 4px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--texto-fraco); font-weight: 700;
}
/* Na grade a celula e transparente e sem borda, para a tabela nao virar um
   formulario. Aqui e um formulario mesmo: cada campo ganha caixa. */
.ficha .campo-ficha .cel {
  width: 100%; box-sizing: border-box;
  padding: 7px 9px; border-radius: 8px;
  border: 1px solid var(--borda-forte);
  background: var(--superficie-2); color: var(--texto);
  font: inherit; font-size: 13px;
}
.ficha .campo-ficha textarea.cel { resize: vertical; min-height: 46px; }
.ficha .campo-ficha .cel:focus { outline: none; border-color: var(--acento); }
.ficha .campo-ficha .cel.erro { border-color: var(--vermelho); }
.ficha .campo-ficha .barra { min-width: 0; }
/* Coluna calculada (Score, Prioridade, Status): e leitura, nao campo. A
   pilha nao estica — ela mede o texto, e esticada parecia um botao. */
.ficha .campo-ficha .pill { display: inline-block; }
.ficha .campo-ficha > .pill, .ficha .campo-ficha > .pct { margin-top: 3px; }
.ficha .campo-ficha a.para-origem { padding: 7px 0; }

.ficha .links-ficha, .ficha .filhos-ficha { margin-top: 22px; }
.ficha .links-ficha .cabeca, .ficha .filhos-ficha .cabeca {
  display: flex; align-items: center; gap: 8px; padding-bottom: 6px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--texto-fraco); font-weight: 700;
}
.ficha ul.lista-links li {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
}
.ficha ul.lista-links a {
  color: var(--acento); text-decoration: none; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ficha ul.lista-links a:hover { text-decoration: underline; }
.ficha ul.lista-links button.tirar-link { flex: none; opacity: .5; }
.ficha ul.lista-links li:hover button.tirar-link { opacity: 1; }
.ficha .filhos-ficha .cabeca {
  display: flex; align-items: center; gap: 8px; padding-bottom: 6px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--texto-fraco); font-weight: 700;
}
.ficha .filhos-ficha .cont {
  background: var(--borda); color: var(--texto);
  border-radius: 10px; padding: 1px 7px; font-size: 11px; letter-spacing: 0;
}
.ficha .filhos-ficha a.abrir-ficha { color: var(--texto); text-decoration: none; }
.ficha .filhos-ficha a.abrir-ficha:hover { color: var(--acento); }

/* O botao que abre a ficha, na coluna da esquerda da linha. Aparece no hover,
   como no Monday: em uma grade de 90 linhas, 90 botoes sempre visiveis
   competiriam com o dado. */
button.expandir-ficha {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  color: var(--texto-fraco); padding: 0 2px; font-size: 13px; line-height: 1;
  opacity: 0; transition: opacity .1s;
}
tr:hover button.expandir-ficha, button.expandir-ficha:focus-visible { opacity: 1; }
button.expandir-ficha:hover { color: var(--acento); }