/* ==========================================================================
   Identidade visual MegaG.

   Portado do design system da plataforma antiga (app/globals.css +
   tailwind.config.ts dela), em CSS puro: o Tailwind aqui entra por CDN e nao
   processa @apply em arquivo externo - regra escrita com @apply simplesmente
   nao produz estilo nenhum.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@500;600;700;800&display=swap');

:root {
  --megag-azul: #1B4372;
  --megag-azul-medio: #2C4475;
  --megag-azul-claro: #004078;
  --megag-azul-hover: #15365C;
  --megag-azul-escuro: #12304F;
  --megag-dourado: #BF9133;
  --megag-dourado-claro: #E1C797;
  --megag-dourado-escuro: #9A7426;
  --megag-cinza-claro: #f4f6fa;
  --megag-cinza-medio: #e2e8f0;
  --megag-cinza-borda: #cbd5e1;
  --megag-cinza-texto: #6e6e6e;
  --megag-cinza-escuro: #505050;
  --megag-preto: #2e2e2e;
  /* Cores do site megag.com.br (V2.1): azul-claro so em fundo e realce; ocre,
     bege e amarelo so em destaque - nunca como cor principal. */
  --megag-azul-fundo: #CCE1F9;
  --megag-ocre: #BF9133;
  --megag-bege: #E1C797;
  --megag-amarelo: #EDAD33;
  --largura-menu: 256px;
  --largura-menu-recolhido: 64px;
}

* { box-sizing: border-box; }

body {
  background: var(--megag-cinza-claro);
  color: var(--megag-preto);
  font-family: Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-family: Montserrat, system-ui, sans-serif; }

/* ── Botoes ─────────────────────────────────────────────────────────────── */

.btn-primario, .btn-secundario, .btn-dourado, .btn-neutro, .btn-perigo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25rem;
  transition: all .15s ease;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn-primario { background: var(--megag-azul); color: #fff; }
.btn-primario:hover { background: var(--megag-azul-hover); }
.btn-secundario { background: #fff; color: var(--megag-azul); border-color: var(--megag-azul); }
.btn-secundario:hover { background: var(--megag-cinza-claro); }
.btn-dourado { background: var(--megag-dourado); color: #fff; }
.btn-dourado:hover { background: var(--megag-dourado-escuro); }
.btn-neutro { color: var(--megag-cinza-escuro); padding: 8px 12px; }
.btn-neutro:hover { background: var(--megag-cinza-medio); }
.btn-perigo { background: #dc2626; color: #fff; }
.btn-perigo:hover { background: #b91c1c; }
.btn-primario:active, .btn-secundario:active, .btn-dourado:active, .btn-perigo:active {
  transform: scale(.96);
}
.btn-primario:disabled, .btn-secundario:disabled, .btn-dourado:disabled, .btn-perigo:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ── Cartoes ────────────────────────────────────────────────────────────── */

.cartao {
  background: #fff;
  border: 1px solid var(--megag-cinza-medio);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08), 0 4px 16px rgba(0, 0, 0, .04);
}
.cartao-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--megag-cinza-medio);
}
.cartao-titulo {
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--megag-preto);
}

/* ── Filtro que vale sozinho ──────────────────────────────────── */

/* Enquanto a lista e refeita, a tabela desbota em vez de piscar vazia: o que
   esta na tela continua sendo o resultado valido ate o novo chegar. */
.filtrando {
  opacity: .5;
  transition: opacity .12s ease-out;
  pointer-events: none;
}

/* ── Indicadores ────────────────────────────────────────────────────────── */

.indicador { position: relative; overflow: hidden; }
.indicador-valor {
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--megag-preto);
}
.indicador-rotulo {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--megag-cinza-texto);
}

/* ── Campos ─────────────────────────────────────────────────────────────── */

.campo {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--megag-cinza-borda);
  border-radius: 8px;
  font-size: 14px;
  color: var(--megag-preto);
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.campo:focus {
  outline: none;
  border-color: var(--megag-azul);
  box-shadow: 0 0 0 3px rgba(27, 67, 114, .15);
}
.campo:disabled { background: var(--megag-cinza-claro); color: var(--megag-cinza-texto); }
.campo-rotulo {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--megag-cinza-escuro);
}

/* ── Selos de status ────────────────────────────────────────────────────── */

.selo {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.selo-PROPOSTA, .selo-PROPOSTA_IDEIA { background: #f1f5f9; color: #475569; }
.selo-TRIAGEM { background: #dbeafe; color: #1d4ed8; }
.selo-COMITE_IDEIAS { background: #ede9fe; color: #6d28d9; }
.selo-VIABILIDADE { background: #fef3c7; color: #b45309; }
.selo-COMPLEMENTACAO_TAP { background: #ffedd5; color: #c2410c; }
.selo-APROVACAO { background: #fee2e2; color: #b91c1c; }
.selo-ESTRUTURACAO { background: #f3e8ff; color: #7e22ce; }
.selo-CRONOGRAMA { background: #dbeafe; color: #1e40af; }
.selo-EXECUCAO { background: #d1fae5; color: #047857; }
.selo-GOLIVE, .selo-PROJETO_CONCLUIDO { background: #dcfce7; color: #166534; }
.selo-ROI, .selo-PAYBACK_ACOMPANHAMENTO, .selo-PAYBACK_ENCERRADO { background: #e0f2fe; color: #0369a1; }
.selo-ENCERRAMENTO, .selo-PROJETO_ENCERRADO { background: #f1f5f9; color: #475569; }
.selo-CANCELADO { background: #fef2f2; color: #ef4444; }
.selo-PAUSADO, .selo-SUSPENSO { background: #fef3c7; color: #92400e; }

.selo-ALTA { background: #fee2e2; color: #b91c1c; }
.selo-MEDIA { background: #fef3c7; color: #b45309; }
.selo-BAIXA { background: #dcfce7; color: #15803d; }

/* As CINCO situacoes da atividade, na mesma ordem e com as mesmas cores da
   barra da macro fase: cinza nem comecou, azul anda, vermelho venceu, verde
   fechou, amarelo fechou fora do prazo. Vermelho e so o atraso aberto - o
   fechado com atraso era vermelho tambem, e os dois se confundiam (V1.34).
   Atividade e fase falam a mesma lingua na grade. */
.selo-PENDENTE, .selo-SEM_DATA, .selo-SEM_CRONOGRAMA { background: #e2e8f0; color: #475569; }
.selo-EM_ANDAMENTO { background: #dbeafe; color: #1e40af; }
.selo-ATRASADO, .selo-CRITICO { background: #fee2e2; color: #991b1b; }
.selo-CONCLUIDO_NO_PRAZO, .selo-CONCLUIDO_SEM_DATA,
.selo-NO_PRAZO, .selo-SAUDAVEL { background: #dcfce7; color: #166534; }
/* V2.1 (F-11): projeto que ja entregou (Payback ou Concluido). */
.selo-ENTREGUE { background: #d1fae5; color: #065f46; }
.selo-CONCLUIDO_COM_ATRASO { background: #fef3c7; color: #92400e; }
/* Cancelada: vermelho sobre fundo escuro. Ela nao e "mais um atraso" - e uma
   decisao de nao fazer, e a tela precisa dizer isso a distancia. */
.selo-CANCELADO { background: #7f1d1d; color: #fecaca; }
.selo-ATENCAO { background: #fef3c7; color: #92400e; }

/* ── Menu lateral ───────────────────────────────────────────────────────── */

.menu-lateral {
  background: linear-gradient(180deg, var(--megag-azul) 0%, var(--megag-azul-escuro) 100%);
  width: var(--largura-menu);
  transition: width .3s ease;
}
.menu-lateral.recolhido { width: var(--largura-menu-recolhido); }
.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin: 2px 8px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #bfdbfe;
  transition: all .15s ease;
}
.menu-item:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.menu-item.ativo { background: rgba(255, 255, 255, .15); color: #fff; }
.menu-item svg { flex-shrink: 0; }
.menu-lateral.recolhido .menu-item { justify-content: center; padding: 10px 8px; }
.menu-lateral.recolhido .menu-rotulo { display: none; }
/* V2.9: recolher/expandir e Sair, no rodape do menu - visiveis nos dois estados. */
.menu-rodape-botao { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px;
  color: #CCE1F9; font-size: 12px; font-weight: 500; }
.menu-rodape-botao:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.menu-lateral .icone-expandir { display: none; }
.menu-lateral.recolhido .icone-expandir { display: inline-flex; }
.menu-lateral.recolhido .icone-recolher { display: none; }
.menu-lateral.recolhido .menu-rodape-botao { justify-content: center; padding: 8px; }
.menu-item, .menu-rodape-botao { white-space: nowrap; }

/* ── Cabecalho de pagina ────────────────────────────────────────────────── */

.titulo-pagina {
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--megag-preto);
}
.subtitulo-pagina { margin-top: 2px; font-size: 14px; color: var(--megag-cinza-texto); }

/* ── Abas ───────────────────────────────────────────────────────────────── */

.lista-abas {
  display: flex;
  border-bottom: 1px solid var(--megag-cinza-medio);
  margin-bottom: 24px;
  overflow-x: auto;
}
.aba {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--megag-cinza-texto);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.aba:hover { color: var(--megag-azul); border-bottom-color: rgba(27, 67, 114, .4); }
.aba.ativa, .aba-ativa { color: var(--megag-azul); border-bottom-color: var(--megag-azul); font-weight: 600; }

/* ── Tabelas ────────────────────────────────────────────────────────────── */

table.grade { width: 100%; border-collapse: collapse; font-size: 14px; }
table.grade thead tr { background: var(--megag-cinza-claro); border-bottom: 1px solid var(--megag-cinza-medio); }
table.grade th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--megag-cinza-texto);
  padding: 12px 16px;
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--megag-cinza-claro);
}
table.grade tbody tr { border-bottom: 1px solid var(--megag-cinza-medio); transition: background .15s ease; }
table.grade tbody tr:hover { background: rgba(244, 246, 250, .7); }
table.grade td { padding: 12px 16px; color: var(--megag-cinza-escuro); }

/* Cores da hierarquia: a COR vem do NIVEL, e quanto mais alto, mais escuro - a
   fase no azul da marca, a tarefa num azul claro, a subtarefa em branco. A
   subtarefa e a base: e nela que mora o detalhe, e e dela que as datas de cima
   sao calculadas. A cor e do nivel, e nao de ter ou nao atividades dentro:
   uma macro que ficou vazia continua sendo macro, e azul (V1.28 pintava de
   branco toda linha sem filhas, e a fase esvaziada pela seta "sumia"). Vale
   tambem sob o mouse - a linha nao pode perder o nivel no hover. O recuo do
   NOME tambem vem do nivel, na propria celula. */
/* V2.5 (estilo MS Project, aprovado em 24/10): a grade e BRANCA. So o Nivel 1
   ganha cor - um azul bem claro com texto azul da marca -, e o que separa os
   niveis e o recuo com o pontilhado. Quem tem atividades dentro fica em
   NEGRITO (nome, responsavel e datas), em qualquer nivel; a atividade sem nada
   dentro fica em texto normal. As cinco cores por nivel pesavam a tela. */
table.grade tbody tr[data-id],
table.grade tbody tr[data-id]:hover { background: #fff; }
table.grade tbody tr[data-id] > td { color: #374151; border-bottom: 1px solid #EEF1F5; }
table.grade tbody tr.nivel-FASE,
table.grade tbody tr.nivel-FASE:hover { background: #E3EDF9; }
table.grade tbody tr.nivel-FASE > td { color: #1B4372; border-top: 1px solid #C9DAEF; }
table.grade tbody tr.nivel-FASE .alternar { color: #1B4372; border-color: #1B4372; }
table.grade tbody tr.linha-macro-fase > td { font-weight: 700; }
table.grade tbody tr.linha-macro-fase:not(.nivel-FASE) > td { color: #111827; }
table.grade tbody tr[data-id] .text-megag-cinza-texto { color: #6B7280; }
table.grade tbody tr.nivel-FASE .text-megag-cinza-texto { color: #1B4372; }
table.grade tbody tr .acao-linha:hover { background: #EEF3FA; }

/* Seta de nivel sem efeito naquela linha fica apagada, como no MS Project. */
.acao-linha:disabled { opacity: .28; cursor: not-allowed; }
.acao-linha:disabled:hover { background: transparent; }

/* ── Linha do tempo ─────────────────────────────────────────────────────── */

.linha-tempo-item {
  position: relative;
  padding-left: 32px;
  padding-bottom: 24px;
  border-left: 2px solid var(--megag-cinza-medio);
}
.linha-tempo-item:last-child { border-color: transparent; }
.linha-tempo-ponto {
  position: absolute;
  left: -9px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--megag-azul);
  border: 2px solid #fff;
}

/* ── Barra de rolagem ───────────────────────────────────────────────────── */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--megag-cinza-borda); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Apresentacao do comite ─────────────────────────────────────────────── */

/* Pagina propria, fora do layout do portal: numa projecao o menu lateral e a
   barra do sistema competem com o conteudo. */
.slide { min-height: calc(100vh - 92px); }
.marco { width: 9px; height: 9px; border-radius: 999px; background: var(--megag-cinza-borda); }
.marco-ativo { background: var(--megag-dourado); transform: scale(1.35); }

/* ── Impressao ──────────────────────────────────────────────────────────── */

@media print {
  .sem-impressao { display: none !important; }
  .cartao { box-shadow: none; border: 1px solid var(--megag-cinza-medio); }
}


/* ── Marca de observacao ────────────────────────────────────────────────── */

/* A observacao saiu da coluna propria: um texto de tres linhas engordava a
   linha inteira e a grade perdia o ritmo. Agora ela e uma marca discreta que
   so aparece quando existe, e o texto inteiro sai no balao ao passar o mouse. */
.marca-observacao {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  flex-shrink: 0;
}
.balao-observacao {
  position: fixed;
  z-index: 70;
  max-width: 320px;
  background: var(--megag-preto, #0f172a);
  color: #fff;
  font-size: 12px;
  line-height: 1.45;
  padding: 8px 11px;
  border-radius: 7px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .25);
  white-space: pre-wrap;
  pointer-events: none;
}

/* ── Balao de aviso ─────────────────────────────────────────────────────── */

/* Fica SOBRE a tela, e nao no topo do documento: avisar nao pode custar o lugar
   onde a pessoa estava. Empilha de baixo para cima, para o aviso mais recente
   aparecer sempre na mesma altura do olho. */
#pilha-avisos {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  max-width: min(420px, calc(100vw - 40px));
  pointer-events: none;
}
.aviso-balao {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px 11px 14px;
  border-radius: 9px;
  border: 1px solid;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
  font-size: 13px;
  line-height: 1.45;
  animation: aviso-entra .16s ease-out;
}
.aviso-erro { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.aviso-ok { background: #ecfdf5; border-color: #6ee7b7; color: #065f46; }
.aviso-texto { margin: 0; flex: 1; }
.aviso-fechar {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  line-height: 1;
  font-size: 15px;
  opacity: .55;
}
.aviso-fechar:hover { opacity: 1; background: rgba(15, 23, 42, .08); }

@keyframes aviso-entra {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Dialogo do sistema ─────────────────────────────────────────────────── */

/* A caixa do navegador (prompt/confirm) nao aceita mais de um campo, nao sabe
   dizer qual dado esta errado e aparece com o endereco do servidor no titulo.
   Toda pergunta do sistema passa por aqui. */
.cobertura-dialogo {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(15, 23, 42, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.dialogo {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .3);
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dialogo-cabecalho {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--megag-cinza-medio);
}
.dialogo-titulo { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 15px; color: var(--megag-azul); }
.dialogo-descricao { font-size: 12.5px; color: var(--megag-cinza-texto); margin-top: 4px; line-height: 1.45; }
.dialogo-corpo { padding: 16px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 13px; }
.dialogo-campo label { display: block; font-size: 12px; font-weight: 600; color: var(--megag-cinza-escuro); margin-bottom: 4px; }
.dialogo-campo .dica { font-size: 11.5px; color: var(--megag-cinza-texto); margin-top: 4px; }
.dialogo-erro { font-size: 12px; color: #b91c1c; margin-top: 4px; }
.dialogo-rodape {
  padding: 12px 20px 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--megag-cinza-medio);
  background: var(--megag-cinza-claro);
}

/* ── Grade destravada do cronograma ─────────────────────────────────────── */

/* Os icones de ESTRUTURA - alterar linha, reordenar, aninhar, promover,
   excluir - so existem com a grade destravada. Isso acontece em rascunho, onde
   montar o plano e o trabalho normal de quem o monta, e no modo livre do
   administrador, que corrige um cronograma ja acordado sem abrir versao.

   Fora disso o administrador ve exatamente a grade que todo mundo ve. */
body.modo-livre #botao-modo-livre { background: #fef3c7; }

/* Modo livre: todas as linhas abertas de uma vez. O lapis de "Alterar linha"
   some (a linha ja esta aberta), mas o lugar dele fica: os icones da fileira
   nao podem pular de posicao. O campo alterado ganha cor, e a linha uma faixa
   a esquerda, para a pessoa achar o que mexeu antes de salvar. */
body.modo-livre .acao-alterar-linha { visibility: hidden; }
.campo-grade.campo-alterado { border-color: #f59e0b; background: #fffbeb; }
/* A situacao aberta diz o que o automatico calcula - "Concluída com atraso
   (automático)" -, e o texto inteiro precisa caber. */
body.modo-livre .celula-situacao select.campo-grade { min-width: 258px; }
/* A data inteira cabe no campo: cortada em "08/06/202", o ano sumia. */
.campo-grade.data-br { min-width: 92px; padding-left: 5px; padding-right: 5px; }
.campo-grade.campo-invalido { border-color: #dc2626; background: #fef2f2; }
table.grade tbody tr.linha-alterada { box-shadow: inset 3px 0 0 #f59e0b; }

/* O pe da grade gruda no fundo da tela enquanto ela rola. As barras ficam
   empilhadas dentro dele: com o modo livre e mudancas de estrutura abertos ao
   mesmo tempo, uma nao cobre a outra. */
.rodape-fixo {
  position: sticky;
  bottom: 12px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.barra-modo-livre,
.barra-estrutura {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid #fcd34d;
  border-radius: 12px;
  background: #fffbeb;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .12);
}
.barra-modo-livre.hidden { display: none; }
/* Azul, e nao ambar: o ambar e do modo livre (campos), o azul e da estrutura
   (setas). Com as duas abertas, a pessoa sabe qual Salvar grava o que. */
.barra-estrutura { border-color: #93c5fd; background: #eff6ff; }
/* A linha em que a seta foi clicada, enquanto a mudanca nao e salva. */
table.grade tbody tr.linha-movida { box-shadow: inset 3px 0 0 #3b82f6; }
/* Na linha azul, o azul da marca sumiria: ali a marca da seta e dourada. */
table.grade tbody tr.linha-movida { box-shadow: inset 4px 0 0 var(--megag-dourado); }

.campo-grade {
  width: 100%;
  border: 1px solid var(--megag-cinza-medio);
  border-radius: 6px;
  padding: 4px 7px;
  font-size: 13px;
  background: #fff;
  /* Explicita: o campo herda a cor da linha, e na fase - azul escuro, texto
     branco - o que se digita sumiria no fundo branco do campo. */
  color: var(--megag-preto);
}
.campo-grade:focus { outline: none; border-color: var(--megag-azul); box-shadow: 0 0 0 2px rgba(27, 67, 114, .12); }

/* A linha em edicao se destaca do resto da grade: sem isso, com a tabela
   inteira igual, e facil salvar achando que se estava noutra linha. */
table.grade tbody tr.linha-em-edicao { box-shadow: inset 3px 0 0 var(--megag-dourado); }
/* So a linha branca ganha o fundo de edicao: a azul fica com a cor do nivel -
   com fundo claro, o texto branco da fase sumiria. */
table.grade tbody tr.linha-em-edicao.nivel-MICRO_2 { background: #fffbeb; }
table.grade tbody tr.linha-em-edicao td { padding-top: 7px; padding-bottom: 7px; }

.acao-linha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 6px;
  flex-shrink: 0;
  color: var(--megag-cinza-texto);
}
.acao-linha:hover { background: var(--megag-cinza-medio); }

/* Icone por referencia (`icone_ref`): o traçado mora num <symbol> declarado uma
   vez na pagina, e estas propriedades descem para ele. */
svg.ic { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Cada acao tem um LUGAR FIXO na fileira. A que nao se aplica deixa o espaco
   vazio em vez de encolher a linha: com os icones dancando de posicao, achar
   "reprogramar" exigia contar da direita para a esquerda em cada linha. */
.fileira-acoes { display: flex; align-items: center; gap: 2px; }
.acao-vazia { display: inline-block; width: 25px; height: 25px; flex-shrink: 0; }

/* As acoes que mudam a estrutura ficam depois de um respiro: excluir nao pode
   encostar em concluir. */
.separador-acoes {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--megag-cinza-medio);
}

/* A estrutura so aparece com a grade destravada - em rascunho, ou no modo livre
   do administrador.
   As regras sao MAIS ESPECIFICAS que a do separador de proposito: as duas
   descrevem a mesma caixa, e quem decide se ela existe e a trava, nao o
   espacamento. Escritas com a mesma especificidade, a do espacamento vencia por
   vir depois no arquivo - e "Alterar linha" e "Excluir" apareciam num
   cronograma ja acordado. */
.fileira-acoes .acoes-estrutura,
.celula-estrutura .acoes-estrutura { display: none; align-items: center; gap: 2px; }
body.grade-editavel .fileira-acoes .acoes-estrutura,
body.modo-livre .fileira-acoes .acoes-estrutura,
body.grade-editavel .celula-estrutura .acoes-estrutura,
body.modo-livre .celula-estrutura .acoes-estrutura { display: inline-flex; }

/* ── Coluna de estrutura, a esquerda ────────────────────────────────────── */

/* Mover e mudar de nivel sao operacoes sobre o LUGAR da atividade, e o lugar se
   le a esquerda, onde esta a hierarquia. Ficam discretos ate o mouse passar na
   linha: sao quatro icones em toda linha, e a coluna nao pode competir com o
   nome da atividade. */
.coluna-estrutura, .celula-estrutura { width: 78px; padding-right: 0 !important; white-space: nowrap; }
.celula-estrutura { padding-top: 6px !important; padding-bottom: 6px !important; }

/* O controle de estrutura e um quadrado: nivel (esquerda e direita) em cima,
   posicao (cima e baixo) embaixo, com uma linha entre as duas fileiras. Era
   uma fileira de quatro icones colada no "abrir/fechar" da macro, e o abrir
   passava por mais uma seta. */
.celula-estrutura .pad-estrutura {
  flex-direction: column;
  gap: 0;
  padding: 1px;
  border: 1px solid #9fb2d1;
  border-radius: 6px;
}
.pad-fileira { display: flex; }
.pad-fileira + .pad-fileira { border-top: 1px solid #9fb2d1; }
.pad-estrutura .acao-linha { width: 22px; height: 17px; border-radius: 4px; }
table.grade tbody tr.nivel-FASE .pad-estrutura { border-color: rgba(255, 255, 255, .45); }
/* V2.5: a alca de arrastar (mudar a posicao entre as irmas) e as marcas de onde a linha vai cair. */
.alca-arrastar { cursor: grab; font-size: 17px; line-height: 1; padding: 0 3px; margin-left: 4px; color: #2C4475;
                 vertical-align: middle; user-select: none; }
.alca-arrastar:active { cursor: grabbing; }
table.grade tbody tr.linha-arrastada { opacity: .45; }
table.grade tbody tr.alvo-antes > td { box-shadow: inset 0 3px 0 var(--megag-dourado); }
table.grade tbody tr.alvo-depois > td { box-shadow: inset 0 -3px 0 var(--megag-dourado); }
table.grade tbody tr.alvo-recusado { cursor: not-allowed; }

/* Abrir e fechar a macro: quadradinho com + e -, ao lado do nome - uma forma
   que nao se confunde com as setas. O nome da macro tambem abre e fecha. */
.alternar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 1.5px solid currentColor;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--megag-azul);
}
.alternar:hover { background: rgba(27, 67, 114, .1); }
table.grade tbody tr.nivel-FASE .alternar:hover { background: rgba(255, 255, 255, .18); }
.alternar-vazio { display: inline-block; width: 18px; flex-shrink: 0; }
.nome-macro { cursor: pointer; }
.nome-macro:hover { text-decoration: underline; text-underline-offset: 3px; }

/* O resumo da macro fechada vira etiqueta: "4 atividades · 4 em aberto". */
.etiqueta-resumo {
  font-size: 11px;
  font-weight: 500;
  padding: 1px 8px;
  border-radius: 999px;
  white-space: nowrap;
  background: #e6eefb;
  color: #0c447c;
}
table.grade tbody tr.nivel-FASE .etiqueta-resumo { background: rgba(255, 255, 255, .18); color: #fff; }
/* .55, e nao .32: o quadrado de setas tem contorno fino, e apagado demais ele
   sumia na linha branca. */
.celula-estrutura .acoes-estrutura { opacity: .55; transition: opacity .12s ease; }
table.grade tbody tr:hover .celula-estrutura .acoes-estrutura { opacity: 1; }

.rodape-grade {
  background: var(--megag-cinza-claro);
  border-top: 1px solid var(--megag-cinza-medio);
}

/* Indicadores do topo do projeto (V1.55): o nome do que mede em cima, o selo e
   o motivo da cor embaixo. Separados por um filete, para nao virar uma fila de
   selos soltos. */
.indicadores-topo { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px 0; }
.indicador-topo {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 0 14px; border-left: 1px solid var(--megag-cinza-medio); min-width: 0;
}
.indicador-rotulo {
  font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--megag-cinza-texto);
}
.indicador-motivo { font-size: 11px; color: var(--megag-cinza-texto); max-width: 260px; line-height: 1.3; }

/* Status Report: a faixa dourada (nota 120). O dourado chapado da marca parecia
   mostarda ao lado do amarelo da faixa 50-69; aqui ele e metal - um degrade com
   o brilho no meio e as bordas escuras, como uma placa polida. Sem animacao: a
   One Page vira foto para o e-mail, e a foto tem de sair igual a tela. */
.faixa-dourada {
  /* V2.1: o ouro metalico saiu (nao e da MegaG). A faixa maxima fica no ocre do
     site, em cor cheia como as outras. */
  background: #BF9133;
  color: #fff;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18);
}
/* As outras faixas em cor cheia (V1.49, opcao C escolhida pelo usuario): o mesmo
   peso visual do dourado, sem efeito - so o dourado e metal. O filete escuro
   embaixo e o mesmo relevo da borda inferior do dourado. */
/* Com "table.grade td" junto: a regra da grade pinta o texto da celula e, mais
   especifica, apagava o branco do numero. */
.faixa-cheia, table.grade td.faixa-cheia { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); }
.faixa-azul, table.grade td.faixa-azul { background: #1d4ed8; color: #fff; }
.faixa-verde, table.grade td.faixa-verde { background: #16a34a; color: #fff; }
.faixa-amarela, table.grade td.faixa-amarela { background: #f59e0b; color: #3b2300; }
.faixa-vermelha, table.grade td.faixa-vermelha { background: #dc2626; color: #fff; }
table.grade td.faixa-dourada { color: #fff; }

/* A nota media dourada no cartao da lista e a bolinha dela: estrela, e nao
   bolinha, para nao confundir com a amarela. */
.texto-dourado { color: #9A7426; }
.estrela-dourada { color: #BF9133; }

/* V2.0: os pontos de cada atividade na grade do cronograma, ao lado da situacao. */
.pontos-atividade { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: 11px;
                    font-weight: 700; font-variant-numeric: tabular-nums; vertical-align: middle; cursor: help; }
.pontos-negativos { background: #fee2e2; color: #b91c1c; }
.pontos-positivos { background: #dcfce7; color: #15803d; }
.pontos-nao-contam { opacity: .55; }

/* ── Pessoas e estrutura (V2.0) ─────────────────────────────────────────
   Os indicadores do topo de cada aba sao atalhos de filtro; os de alerta
   apontam cadastro incompleto (sem cargo, sem area) e os de perigo, atraso. */
.indicador-cadastro {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--megag-cinza-medio);
  background: #fff;
  color: var(--megag-cinza-escuro);
}
button.indicador-cadastro:hover { border-color: var(--megag-azul); color: var(--megag-azul); }
.indicador-alerta { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.indicador-perigo { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; }
.grade-filtros { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.grade-filtros input[type="search"] { grid-column: span 2; }
th.ordenavel { cursor: pointer; user-select: none; }
th.ordenavel::after { content: ' ↕'; opacity: .35; font-size: 11px; }
th.ordenavel[data-sentido="cresce"]::after { content: ' ↑'; opacity: .8; }
th.ordenavel[data-sentido="decresce"]::after { content: ' ↓'; opacity: .8; }

/* Ambiente de teste fixo (F-16): selo no topo, por cima de tudo. */
.selo-ambiente-de-teste {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 1000;
  background: #EDAD33; color: #1B4372; font: 600 12px/1.2 Inter, system-ui, sans-serif;
  padding: 4px 14px; border-radius: 0 0 8px 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  pointer-events: none;
}

/* V2.1 (V-05): os graficos do Payback tem altura fixa; a largura e a do cartao. */
.grafico-payback { position: relative; height: 240px; }

/* V2.1 (V-02): as cinco etapas recolhidas no cabecalho do projeto. */
.etapa-do-ciclo { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
                  font-size: 12px; font-weight: 500; border: 1px solid transparent; white-space: nowrap; }
.etapa-do-ciclo b { font-weight: 800; }
.etapa-CUMPRIDA { background: #dcfce7; color: #166534; }
.etapa-COM_PENDENCIA { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.etapa-EM_ANDAMENTO { background: var(--megag-azul); color: #fff; font-weight: 600; }
.etapa-PAUSADA { background: #fff7ed; color: #b45309; border-color: #f59e0b; font-weight: 600; }
.etapa-CANCELADA { background: #fef2f2; color: #b91c1c; border-color: #ef4444; font-weight: 600; }
.etapa-FUTURA { background: var(--megag-cinza-claro); color: var(--megag-cinza-texto); }

/* V2.2 (F-06): os niveis micro (4 e 5) ficam no branco, como a subtarefa, com o
   texto um pouco menor - o detalhe nao compete com a fase. */
table.grade tbody tr.nivel-MICRO_1 > td.celula-nome,
table.grade tbody tr.nivel-MICRO_2 > td.celula-nome { font-size: 0.8125rem; }
table.grade tbody tr.nivel-MICRO_2 > td { color: var(--megag-cinza-escuro); }

/* V2.2 (F-06): a data proposta, ao lado da aprovada, enquanto o pedido espera. */
.data-proposta { font-size: 11px; color: #92400e; background: #fef3c7; border-radius: 4px; padding: 0 4px;
                 margin-top: 2px; display: inline-block; white-space: nowrap; }

/* V2.5: o responsavel numa linha so - o primeiro nome e "+N"; a lista inteira no balao. */
.celula-responsavel { white-space: nowrap; }
.celula-responsavel .resp-primeiro { display: inline-block; max-width: 128px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.celula-responsavel .resp-mais { display: inline-block; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 0 6px;
                                 background: #F3F4F6; color: #6B7280; }

/* V2.5: o nome ganha espaco (as outras colunas ficaram enxutas) e os pontos vao para o fim da linha. */
#grade-cronograma th, #grade-cronograma td { padding: 8px 8px; }
#grade-cronograma .coluna-nome { min-width: 300px; width: 100%; }
#grade-cronograma .celula-responsavel { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
#grade-cronograma .coluna-pontos, #grade-cronograma .celula-pontos { width: 44px; text-align: right; padding-right: 10px; }
/* Num notebook de 1366 a grade inteira cabe sem rolar para o lado: a coluna de
   pontos, que agora fecha a linha, nao pode ficar escondida a direita. */
/* Situacao: texto com uma bolinha da cor, sem a pilula de fundo (estilo MS Project). */
#grade-cronograma .celula-situacao .selo { background: transparent; padding: 0; font-size: 12.5px; font-weight: 500; color: #374151; }
#grade-cronograma .celula-situacao .selo::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
                                  margin-right: 7px; background: #9CA3AF; }
#grade-cronograma .celula-situacao .selo-ATRASADO { color: #B91C1C; }
#grade-cronograma .celula-situacao .selo-ATRASADO::before { background: #DC2626; }
#grade-cronograma .celula-situacao .selo-EM_ANDAMENTO::before { background: #2563EB; }
#grade-cronograma .celula-situacao .selo-CONCLUIDO_NO_PRAZO::before, #grade-cronograma .celula-situacao .selo-CONCLUIDO_SEM_DATA::before { background: #16A34A; }
#grade-cronograma .celula-situacao .selo-CONCLUIDO_COM_ATRASO::before { background: #CA8A04; }
#grade-cronograma .celula-situacao .selo-CANCELADO { color: #6B7280; text-decoration: line-through; }
#grade-cronograma .pontos-atividade { background: transparent; padding: 0; font-size: 12px; font-weight: 600; }
#grade-cronograma .fileira-acoes { gap: 0; }
#grade-cronograma .acao-linha, #grade-cronograma .acao-vazia { width: 22px; height: 24px; }

/* V2.5: a coluna Acoes nao aparece; as acoes abrem com o botao direito na linha. */
#grade-cronograma .coluna-acoes, #grade-cronograma .celula-acoes { display: none; }
#grade-cronograma tbody tr[data-id] { cursor: context-menu; }
#grade-cronograma tbody tr[data-id] .nome-macro, #grade-cronograma tbody tr[data-id] button { cursor: pointer; }
.menu-da-linha { position: fixed; z-index: 60; min-width: 240px; max-width: 340px; padding: 6px;
                 background: #fff; border: 1px solid #d8e0ea; border-radius: 10px;
                 box-shadow: 0 10px 30px rgba(15, 35, 60, .18); }
.menu-da-linha-titulo { padding: 4px 8px 6px; margin-bottom: 4px; border-bottom: 1px solid #eef2f7;
                        font-size: 12px; font-weight: 600; color: #12304F;
                        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-da-linha-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px;
                      border-radius: 6px; text-align: left; }
.menu-da-linha-item:hover, .menu-da-linha-item:focus { background: #eef3fa; outline: none; }
.menu-da-linha-texto { display: flex; flex-direction: column; font-size: 13px; color: #1f2937; }
.menu-da-linha-texto small { font-size: 11px; color: #6b7280; }
.menu-da-linha-vazio { padding: 6px 8px; font-size: 12px; color: #6b7280; }
/* V2.5: o "Nova atividade aqui" abre o menu, separado das acoes sobre a linha. */
.menu-da-linha-incluir:not(:last-child) { margin-bottom: 4px; position: relative; }
.menu-da-linha-incluir:not(:last-child)::after { content: ""; position: absolute; left: 8px; right: 8px;
                                                 bottom: -3px; border-bottom: 1px solid #eef2f7; }
.menu-da-linha-incluir .menu-da-linha-texto { font-weight: 600; color: #1B4372; }
/* Cronograma sem atividades: o convite para a primeira, no meio da grade. */
.grade-vazia { padding: 56px 16px !important; text-align: center; }
/* A atividade nova sendo digitada na propria grade (V2.5). */
#grade-cronograma tbody tr.linha-nova > td { background: #F5F9FF; padding-top: 7px; padding-bottom: 7px; }
#grade-cronograma tbody tr.linha-nova { box-shadow: inset 3px 0 0 var(--megag-azul); }
#grade-cronograma tr.linha-nova .celula-nome .campo-grade { width: 100%; }
#grade-cronograma tr.linha-nova .celula-responsavel,
#grade-cronograma tr.linha-em-edicao .celula-responsavel { max-width: none; overflow: visible; }
#grade-cronograma .seletor-responsavel { width: 140px; }
body.modo-livre #grade-cronograma .celula-responsavel input.seletor-responsavel { width: 118px; }
#grade-cronograma tr.linha-nova .celula-situacao .campo-grade { width: 118px; min-width: 0; }
/* Seletor de responsavel: a lista com busca, fora da tabela. */
.lista-responsavel { position: fixed; z-index: 70; max-width: 380px; max-height: 300px; overflow-y: auto;
                     padding: 4px; background: #fff; border: 1px solid #d8e0ea; border-radius: 10px;
                     box-shadow: 0 10px 30px rgba(15, 35, 60, .18); }
.lista-responsavel-item { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; padding: 6px 8px;
                          border-radius: 6px; cursor: pointer; font-size: 13px; color: #1f2937; }
.lista-responsavel-item.ativo { background: #eef3fa; }
.lista-responsavel-ninguem { color: #6b7280; font-style: italic; }
.lista-responsavel-tag { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
                         color: #1B4372; background: #E3EDF9; border-radius: 999px; padding: 0 6px; }
.lista-responsavel-carga { flex-basis: 100%; font-size: 11px; color: #6b7280; }
.lista-responsavel-criar { align-items: center; margin-top: 2px; border-top: 1px solid #eef2f7;
                           border-radius: 0 0 6px 6px; color: #1B4372; }
.lista-responsavel-vazia { padding: 6px 8px; font-size: 12px; color: #6b7280; }
#grade-cronograma .celula-pontos .pontos-atividade { margin-left: 0; }
/* No modo livre a lista de situacao era a coluna mais larga da grade (258px). */
body.modo-livre #grade-cronograma .celula-situacao select.campo-grade { min-width: 0; width: 160px; }
body.modo-livre #grade-cronograma .celula-responsavel { max-width: none; }
body.modo-livre #grade-cronograma .celula-responsavel select.campo-grade { width: 118px; }
body.modo-livre #grade-cronograma .campo-grade.data-br { min-width: 0; width: 88px; }
body.modo-livre #grade-cronograma .coluna-nome { min-width: 280px; }

/* V2.5: pontilhado ligando a mae as filhas (desenharGuias), como a arvore do MS Project. */
#grade-cronograma .celula-nome { position: relative; }
#grade-cronograma .guia { position: absolute; pointer-events: none; border-color: #B8C2CF; }
#grade-cronograma .guia-vertical { top: 0; bottom: 0; border-left: 2px dotted; }
#grade-cronograma .guia-cotovelo { top: 0; bottom: 0; border-left: 2px dotted; }
#grade-cronograma .guia-cotovelo-fim { top: 0; height: 50%; border-left: 2px dotted; }
#grade-cronograma .guia-horizontal { top: 50%; border-top: 2px dotted; }

/* ── Avisos do sino (V2.5) ─────────────────────────────────────────────── */
.sino-contagem { position: absolute; top: -2px; right: -2px; min-width: 18px; padding: 0 5px; border-radius: 999px;
                 font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; color: #fff; }
.sino-alta { background: #DC2626; }
.sino-media { background: #D97706; }
.sino-info { background: #2563EB; }
.avisos-cobertura { position: fixed; inset: 0; z-index: 70; background: rgba(15, 23, 42, .25); }
.avisos-painel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 71; width: min(440px, 100vw);
                 display: flex; flex-direction: column; background: #fff; box-shadow: -12px 0 30px rgba(15, 35, 60, .18);
                 transform: translateX(100%); transition: transform .2s ease; }
.avisos-painel.aberto { transform: translateX(0); }
.avisos-cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
                    padding: 18px 20px 14px; border-bottom: 1px solid #EEF1F5; }
.avisos-titulo { font-size: 16px; font-weight: 700; color: #1B4372; }
.avisos-resumo { font-size: 12px; color: #6B7280; margin-top: 2px; }
.avisos-fechar { font-size: 22px; line-height: 1; color: #6B7280; padding: 0 4px; }
.avisos-lista { flex: 1; overflow-y: auto; padding: 8px 12px 20px; }
.avisos-vazio { padding: 32px 12px; text-align: center; font-size: 13px; color: #6B7280; }
.avisos-grupo { margin-top: 12px; }
.avisos-grupo-titulo { display: flex; align-items: center; gap: 8px; padding: 0 8px 6px; font-size: 11px; font-weight: 700;
                       text-transform: uppercase; letter-spacing: .04em; color: #374151; }
.avisos-grupo-n { margin-left: auto; font-weight: 600; color: #9CA3AF; }
.avisos-ponto { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.avisos-alta { background: #DC2626; }
.avisos-media { background: #D97706; }
.avisos-info { background: #2563EB; }
.aviso { display: flex; flex-direction: column; gap: 1px; margin: 0 0 4px; padding: 8px 10px 8px 12px; border-radius: 8px;
         border-left: 3px solid #D1D5DB; }
.aviso:hover { background: #F3F6FB; }
.aviso-alta { border-left-color: #DC2626; }
.aviso-media { border-left-color: #D97706; }
.aviso-info { border-left-color: #2563EB; }
.aviso-titulo { font-size: 13px; font-weight: 600; color: #111827; }
.aviso-detalhe { font-size: 12px; color: #374151; }
.aviso-projeto { font-size: 11px; color: #6B7280; }
.avisos-mais { margin: 2px 0 0 12px; font-size: 12px; font-weight: 600; color: #1B4372; }

/* O destaque de quem chega por um aviso: amarelo que some em ~2,5 s. */
@keyframes foco-pulso {
  0%, 45% { background-color: #FFF3C4; box-shadow: inset 0 0 0 2px #F5B800; }
  100% { background-color: transparent; box-shadow: inset 0 0 0 2px transparent; }
}
.foco-destaque:not(tr) { animation: foco-pulso 2.6s ease-out; border-radius: 6px; }
/* Na linha da grade, uma faixa so (e nao uma caixa por celula), com a marca na ponta esquerda. */
@keyframes foco-linha { 0%, 45% { background-color: #FFF3C4; } 100% { background-color: transparent; } }
@keyframes foco-linha-ponta { 0%, 45% { box-shadow: inset 4px 0 0 #F5B800; } 100% { box-shadow: inset 4px 0 0 transparent; } }
tr.foco-destaque > td { animation: foco-linha 2.6s ease-out; }
tr.foco-destaque > td:first-child { animation: foco-linha 2.6s ease-out, foco-linha-ponta 2.6s ease-out; }

/* ── V2.5: tela de aprovacao do cronograma (prefixo ap-) ───────────────── */
.ap-encerrado-ok { border-color:#BBF7D0; background:#F0FDF4; color:#166534; }
.ap-encerrado-recusa { border-color:#F2C46D; background:#FFFBEB; color:#92400E; }
.ap-fila { display:flex; flex-wrap:wrap; }
.ap-fila-passo { flex:1 1 220px; display:flex; gap:10px; align-items:flex-start; padding:12px 14px; }
.ap-fila-passo + .ap-fila-passo { border-left:1px solid #EEF1F5; }
.ap-fila-eu { background:#F5F9FF; }
.ap-fila-marca { width:26px; height:26px; border-radius:999px; display:flex; align-items:center; justify-content:center;
                 font-size:12px; font-weight:700; flex-shrink:0; }
.ap-ok { background:#DCFCE7; color:#15803D; }
.ap-recusa { background:#FEE2E2; color:#B91C1C; }
.ap-voce { background:#1B4372; color:#fff; }
.ap-espera { background:#E5E9F0; color:#4B5563; }
.ap-kpi { padding:14px 16px; }
.ap-kpi-ambar { border-color:#E1C797; background:#FFFCF5; }
.ap-kpi-rotulo { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:#6B7280; }
.ap-kpi-ambar .ap-kpi-rotulo { color:#9A7426; }
.ap-kpi-valor { font-size:24px; font-weight:700; color:#12304F; line-height:1.2; margin-top:4px; }
.ap-kpi-nota { font-size:12px; color:#6B7280; margin-top:2px; }
.ap-atencao { color:#B45309; font-weight:600; }
.ap-bom { color:#15803D; font-weight:600; }
.ap-alternar { display:inline-flex; border:1px solid #D7DEE8; border-radius:8px; overflow:hidden; font-size:12px; }
.ap-alternar button { padding:4px 10px; color:#4B5563; }
.ap-alternar button.ativo { background:#1B4372; color:#fff; font-weight:600; }
.ap-marcar { font-size:11.5px; color:#6B7280; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; height:fit-content; cursor:pointer; }
.ap-marcado { color:#92400E; font-weight:600; cursor:default; }
.ap-legenda { display:flex; gap:14px; font-size:12px; color:#6B7280; align-items:center; flex-wrap:wrap; }
.ap-legenda i { display:inline-block; vertical-align:middle; margin-right:6px; border-radius:3px; }
.ap-gantt-cabeca, .ap-gantt-linha { display:grid; grid-template-columns:minmax(200px, 300px) 1fr 84px; align-items:center; }
.ap-gantt-cabeca { font-size:11px; color:#6B7280; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
                   padding-bottom:6px; border-bottom:1px solid #E2E8F0; }
.ap-gantt-meses { position:relative; height:16px; }
.ap-gantt-meses span { position:absolute; transform:translateX(4px); white-space:nowrap; }
.ap-gantt-linha { min-height:40px; border-bottom:1px solid #EEF1F5; }
.ap-gantt-linha.ap-atividade { min-height:32px; background:#FAFBFD; }
.ap-gantt-linha[data-filhas="1"] { cursor:pointer; }
.ap-gantt-nome { font-size:13px; color:#1B4372; font-weight:600; padding-right:10px; min-width:0; }
.ap-atividade .ap-gantt-nome { font-size:12px; font-weight:500; color:#1f2937; }
.ap-gantt-nome small { display:block; font-weight:400; color:#6B7280; font-size:11px; padding-left:18px; }
.ap-gantt-nome small s { color:#9CA3AF; }
.ap-nome-texto { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ap-seta, .ap-seta-vazia { display:inline-block; width:14px; color:#6B7280; font-size:10px; }
.ap-wbs { color:#6B7280; font-weight:500; margin-right:4px; }
.ap-chips { display:flex; gap:4px; flex-wrap:wrap; margin-top:2px; padding-left:18px; }
.ap-chip { font-size:10px; font-weight:600; border-radius:999px; padding:0 6px; line-height:16px; }
.ap-chip-data { background:#FEF3C7; color:#92400E; }
.ap-chip-nova { background:#DCFCE7; color:#166534; }
.ap-chip-cancelada { background:#F3F4F6; color:#4B5563; }
.ap-gantt-trilho { position:relative; height:40px; }
.ap-atividade .ap-gantt-trilho { height:32px; }
.ap-gantt-mes { position:absolute; top:0; bottom:0; border-left:1px dashed #E5E9F0; }
.ap-barra { position:absolute; border-radius:4px; }
.ap-barra-antes { height:6px; top:8px; background:#CBD5E1; }
.ap-barra-agora { height:12px; top:18px; background:#1B4372; }
.ap-atividade .ap-barra-antes { top:6px; height:5px; }
.ap-atividade .ap-barra-agora { top:14px; height:10px; background:#7C93B3; }
.ap-g-reagendada .ap-barra-agora { background:#D97706 !important; }
.ap-g-incluida .ap-barra-agora { background:#16A34A !important; }
.ap-g-cancelada .ap-barra-agora { background:#9CA3AF !important; }
.ap-g-reagendada .ap-gantt-nome { box-shadow:inset 3px 0 0 #D97706; }
.ap-g-incluida .ap-gantt-nome { box-shadow:inset 3px 0 0 #16A34A; }
.ap-g-cancelada .ap-gantt-nome { box-shadow:inset 3px 0 0 #9CA3AF; }
.ap-g-cancelada .ap-nome-texto { text-decoration:line-through; color:#6B7280; }
.ap-gantt-delta { text-align:right; font-size:12px; font-weight:600; color:#6B7280; }
.ap-g-reagendada .ap-gantt-delta { color:#B45309; }
.ap-g-incluida .ap-gantt-delta { color:#15803D; }
.ap-mudanca, .ap-nasceu { display:grid; grid-template-columns:88px 1fr auto; gap:10px; padding:11px 0; border-bottom:1px solid #EEF1F5; }
.ap-nasceu { grid-template-columns:1fr auto; border-bottom-color:#F5E6C8; }
.ap-mudanca:last-of-type, .ap-nasceu:last-of-type { border-bottom:0; }
.ap-pedida { background:#FFFBEB; margin:0 -18px; padding-left:18px; padding-right:18px; }
.ap-pedida .ap-marcar { color:#92400E; font-weight:600; }
.ap-tipo { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; border-radius:999px;
           padding:2px 8px; height:fit-content; text-align:center; }
.ap-tipo-reagendada { background:#FEF3C7; color:#92400E; }
.ap-tipo-incluida { background:#E3EDF9; color:#1B4372; }
.ap-tipo-cancelada, .ap-tipo-excluida { background:#F3F4F6; color:#4B5563; }
.ap-mudanca-titulo { font-size:13px; color:#1f2937; font-weight:600; }
.ap-de-para { font-size:12px; color:#374151; margin-top:2px; }
.ap-porque { font-size:12px; color:#4B5563; margin-top:4px; padding-left:10px; border-left:2px solid #E2E8F0; }
.ap-porque b { color:#6B7280; font-weight:600; }
.ap-nasceram { border-color:#E1C797; background:#FFFCF5; }
.ap-ponto { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:6px; }
.ap-segurado { font-size:11px; color:#9A7426; background:#FBF4E4; border-radius:999px; padding:1px 8px; }
.ap-opcoes { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px; }
.ap-opcao { border:1.5px solid #E2E8F0; border-radius:10px; padding:12px 14px; display:flex; gap:10px; align-items:flex-start; cursor:pointer; }
.ap-opcao input { margin-top:3px; accent-color:#1B4372; }
.ap-opcao.ap-escolhida { border-color:#1B4372; background:#F5F9FF; }
.ap-opcao[data-opcao="parcial"].ap-escolhida { border-color:#D97706; background:#FFFBEB; }
.ap-opcao[data-opcao="parcial"] input { accent-color:#D97706; }
.ap-opcao.ap-perigo.ap-escolhida { border-color:#B91C1C; background:#FEF2F2; }
.ap-opcao.ap-perigo input { accent-color:#B91C1C; }
.ap-opcao-titulo { display:block; font-size:13.5px; font-weight:700; color:#12304F; }
.ap-perigo .ap-opcao-titulo { color:#B91C1C; }
.ap-opcao-texto { display:block; font-size:12px; color:#4B5563; margin-top:3px; line-height:1.45; }
.ap-so-quem { font-size:10.5px; font-weight:600; color:#6B7280; background:#F3F4F6; border-radius:999px; padding:1px 7px; margin-left:4px; }
.ap-destino { font-size:12px; color:#374151; }
.ap-destino b { color:#12304F; }
.ap-btn-ambar { background:#D97706; color:#fff; font-weight:600; border-radius:8px; padding:8px 16px; }
.ap-btn-perigo { background:#B91C1C; color:#fff; font-weight:600; border-radius:8px; padding:8px 16px; }

/* ===================================================================
   V2.6 - cronograma unico: a marca da linha, a linha de base e o Historico
   =================================================================== */
/* So tres marcas, sem texto no meio da linha: uma faixa fina na borda e um icone junto do WBS. */
#grade-cronograma tr.linha-marca-apr > td:first-child { box-shadow: inset 3px 0 0 #D97706; }
#grade-cronograma tr.linha-marca-rep > td:first-child { box-shadow: inset 3px 0 0 #DC2626; }
#grade-cronograma tr.linha-marca-can > td:first-child { box-shadow: inset 3px 0 0 #9CA3AF; }
.celula-wbs { white-space: nowrap; }
.marca-mudanca { display: inline-flex; vertical-align: -2px; margin-left: 4px; cursor: help; }
.marca-mudanca svg { stroke: currentColor; fill: none; stroke-width: 2.2; }
.marca-apr { color: #D97706; } .marca-rep { color: #DC2626; } .marca-can { color: #9CA3AF; }
.legenda-marcas { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: #4B5563; }
.legenda-marcas > span { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border: 1px solid #E5E9F0; border-radius: 999px; background: #fff; }
.legenda-marcas .marca-mudanca { margin-left: 0; }
.legenda-marcas b { color: #12304F; }
.data-base { display: block; font-size: 10.5px; color: #9CA3AF; font-weight: 400; line-height: 1.2; }
.dialogo-historico { max-width: 640px; width: 640px; }
.historico-resumo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.historico-resumo > div { background: #F8FAFC; border: 1px solid #EEF1F5; border-radius: 8px; padding: 8px 10px; font-size: 12px; color: #6B7280; }
.historico-resumo b { display: block; font-size: 13px; color: #12304F; }
.historico-lista { list-style: none; margin: 0; padding: 0 0 0 6px; max-height: 50vh; overflow-y: auto; }
.historico-item { position: relative; padding: 8px 0 8px 18px; border-left: 2px solid #E2E8F0; font-size: 13px; color: #374151; }
.historico-item::before { content: ''; position: absolute; left: -7px; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: #CBD5E1; border: 2px solid #fff; }
.historico-pedido_de_mudanca::before, .historico-reprogramacao::before { background: #D97706; }
.historico-aprovacao::before, .historico-pedido_aprovado::before { background: #15803D; }
.historico-devolucao::before, .historico-deletada::before, .historico-pedido_deletado::before { background: #DC2626; }
.historico-detalhe { display: block; font-size: 12px; color: #4B5563; font-style: italic; margin-top: 1px; white-space: pre-line; }
.historico-quem { display: block; font-size: 11.5px; color: #6B7280; margin-top: 1px; }

/* V2.6 - Minhas aprovacoes: a fila vertical de cartoes do cronograma */
.fila-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.fila-total { font-size: 12px; font-weight: 600; color: #fff; background: #1B4372; border-radius: 999px; padding: 4px 12px; }
.fila-filtros { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.fila-chip { font-size: 12px; border: 1px solid #D7DEE8; border-radius: 999px; padding: 4px 12px; color: #374151; background: #fff; }
.fila-chip.ativo { background: #1B4372; border-color: #1B4372; color: #fff; font-weight: 600; }
.fila-legenda { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 6px; }
.fila-legenda div { font-size: 12px; color: #4B5563; background: #F8FAFC; border: 1px solid #EEF1F5; border-radius: 8px; padding: 8px 10px; }
.fila-legenda b { display: block; font-size: 12px; margin-bottom: 2px; }
.fila-projeto { display: flex; align-items: center; gap: 10px; margin: 20px 0 8px; flex-wrap: wrap; }
.fila-projeto .cod { font-family: ui-monospace, monospace; font-size: 11px; background: #E3EDF9; color: #1B4372; border-radius: 4px; padding: 2px 6px; }
.fila-projeto .nome { font-size: 15px; font-weight: 700; color: #12304F; }
.fila-projeto .meta { font-size: 12px; color: #6B7280; }
.fila-projeto a { margin-left: auto; font-size: 12px; color: #1B4372; }
.fila-cartao { display: grid; grid-template-columns: 1fr 168px; background: #fff; border: 1px solid #E2E8F0; border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.fila-cartao.rodada { border-color: #F2C46D; }
.fila-corpo { padding: 14px 16px; border-left: 4px solid #CBD5E1; }
.t-reagendar .fila-corpo { border-left-color: #D97706; } .t-incluir .fila-corpo, .t-inicial .fila-corpo { border-left-color: #1B4372; }
.t-cancelar .fila-corpo { border-left-color: #6B7280; } .t-excluir .fila-corpo { border-left-color: #B91C1C; }
.fila-linha1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fila-tipo { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: 999px; padding: 2px 9px; background: #F3F4F6; color: #4B5563; }
.t-reagendar .fila-tipo { background: #FEF3C7; color: #92400E; } .t-incluir .fila-tipo, .t-inicial .fila-tipo { background: #E3EDF9; color: #1B4372; }
.t-excluir .fila-tipo { background: #FEE2E2; color: #991B1B; }
.fila-rodada { font-size: 10.5px; font-weight: 700; background: #FBF4E4; color: #9A7426; border: 1px solid #E1C797; border-radius: 999px; padding: 1px 8px; }
.fila-ativ { font-size: 14px; font-weight: 600; color: #1f2937; }
.fila-ativ .wbs { color: #6B7280; font-weight: 500; margin-right: 4px; }
.fila-caminho { font-size: 11.5px; color: #6B7280; }
.fila-grade { display: grid; grid-template-columns: 96px 1fr; gap: 4px 10px; margin-top: 10px; font-size: 12.5px; color: #374151; }
.fila-grade dt { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: #6B7280; padding-top: 1px; }
.fila-atrasa { color: #B45309; font-weight: 600; } .fila-ok { color: #15803D; }
.fila-porque { font-style: italic; } .fila-autor { font-size: 11.5px; color: #6B7280; }
.fila-trio { display: flex; gap: 14px; margin-top: 10px; font-size: 12px; color: #4B5563; flex-wrap: wrap; }
.fila-trio span { display: inline-flex; align-items: center; gap: 5px; }
.fila-m { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; font-style: normal; }
.fila-m.ok { background: #DCFCE7; color: #15803D; } .fila-m.falta { background: #F3F4F6; color: #6B7280; }
.fila-m.voce { background: #1B4372; color: #fff; } .fila-m.refaz { background: #FEF3C7; color: #92400E; }
.fila-botoes { background: #F8FAFC; border-left: 1px solid #EEF1F5; padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.fila-b { font-size: 13px; font-weight: 600; border-radius: 8px; padding: 8px 10px; text-align: center; border: 1px solid; }
.fila-b.aprovar { background: #15803D; border-color: #15803D; color: #fff; }
.fila-b.reprovar { background: #fff; border-color: #D97706; color: #B45309; }
.fila-b.deletar { background: #fff; border-color: #FCA5A5; color: #B91C1C; }
.fila-nota { font-size: 11px; color: #6B7280; text-align: center; }

/* V2.6 etapa 3: o aviso depois de mover, com o Desfazer */
.aviso-movimento { position: fixed; left: 50%; transform: translateX(-50%); bottom: 22px; z-index: 60; display: flex; align-items: center; gap: 14px;
  background: #12304F; color: #fff; border-radius: 10px; padding: 10px 16px; font-size: 13px; box-shadow: 0 8px 24px rgba(18,48,79,.3); }
.aviso-movimento button { color: #F2D48B; font-weight: 700; }
.aviso-movimento small { color: #B6C4D6; }

/* V2.7: o cadeado da primeira versao - modulo e aba "em desenvolvimento" */
.menu-item-bloqueado { opacity: .55; cursor: not-allowed; }
.menu-item-bloqueado:hover { background: transparent; }
.aba-bloqueada { display: inline-flex; align-items: center; gap: 4px; color: #9CA3AF; cursor: not-allowed; }

/* V2.9: Ranking de pessoas - busca, numeros compactos e o cronograma em recorte */
.ranking-busca { width: 260px !important; max-width: 100%; }
.ranking-linha { cursor: pointer; }
.ranking-sub { display: block; font-size: 11.5px; color: #6B7280; }
.ranking-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.ranking-kpi { background: #fff; border: 1px solid #E5E9F0; border-radius: 10px; padding: 8px 12px; }
.ranking-kpi b { display: block; font-family: Montserrat, system-ui, sans-serif; font-size: 22px; line-height: 1.15; color: var(--megag-preto); }
.ranking-kpi > span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #6B7280; }
@media (max-width: 900px) { .ranking-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.recorte-bloco summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.recorte-bloco summary::-webkit-details-marker { display: none; }
.recorte-bloco[open] .recorte-seta { transform: rotate(90deg); }
.recorte-seta { transition: transform .15s ease; color: #6B7280; }
table.recorte td { padding: 7px 12px; font-size: 13px; }
table.recorte tr.recorte-pai > td { background: #E3EDF9; color: #1B4372; font-weight: 700; border-top: 1px solid #C9DAEF; }
table.recorte tr.recorte-outra > td { color: #A3AAB5; }
table.recorte tr.recorte-outra .selo { opacity: .5; }
table.recorte tr.recorte-dela > td { background: #EAF2FD; color: #12304F; font-weight: 600; }
table.recorte tr.recorte-dela > td:first-child { box-shadow: inset 4px 0 0 #2563EB; }
table.recorte tr.recorte-atrasada > td { background: #FDECEC; color: #7F1D1D; font-weight: 600; }
table.recorte tr.recorte-atrasada > td:first-child { box-shadow: inset 4px 0 0 #DC2626; }
table.recorte tr.recorte-separa > td { padding: 4px; background: #fff; border: 0; }
/* V2.9: de onde vem a pontuacao - uma cor por origem, igual nas duas telas */
.comp-atraso { --comp: #DC2626; } .comp-sem_iniciar { --comp: #F59E0B; } .comp-sem_data { --comp: #7C3AED; }
.comp-sem_responsavel { --comp: #64748B; } .comp-ganhos { --comp: #16A34A; }
.comp-ponto { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--comp); vertical-align: middle; }
.comp-barra { display: flex; height: 10px; border-radius: 3px; overflow: hidden; background: #F1F4F8; }
.comp-barra > i { display: block; height: 100%; background: var(--comp); }
.comp-trilho { width: 100%; background: transparent; }
.comp-legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: #4B5563; }
.comp-legenda b { color: #111827; font-variant-numeric: tabular-nums; }
.comp-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 1px 7px;
  border-radius: 999px; background: color-mix(in srgb, var(--comp) 12%, #fff); color: var(--comp); white-space: nowrap; }
.ranking-sub-num { display: block; font-size: 11px; color: #9CA3AF; white-space: nowrap; }
.ranking-kpis.oito { grid-template-columns: repeat(8, minmax(0, 1fr)); }
@media (max-width: 1100px) { .ranking-kpis.oito { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ranking-composicao { background: #fff; border: 1px solid #E5E9F0; border-radius: 10px; padding: 12px 14px; }
.ranking-composicao .comp-barra { height: 14px; margin: 8px 0 10px; }
/* V2.10: as duas visoes da tela Recurso por atividade */
.abas-recurso { display: flex; gap: 4px; border-bottom: 1px solid #E5E9F0; }
.abas-recurso a { padding: 8px 14px; font-size: 13.5px; font-weight: 600; color: #6B7280; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.abas-recurso a:hover { color: var(--megag-azul); }
.abas-recurso a.ativa { color: var(--megag-azul); border-bottom-color: var(--megag-azul); }
.ranking-filtro { width: auto !important; max-width: 280px; }