/* Estrutura da página de acompanhamento individual. */
#paineis-entes {
  display: grid;
  gap: 24px;
}

.bloco-ente {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--borda);
  border-top: 4px solid var(--azul);
  border-radius: 10px;
  background: white;
  anchor-scope: --situacao;
}

.bloco-ente[data-uf="AM"] {
  border-top-color: var(--verde);
}

.bloco-ente[hidden] {
  display: none;
}

.tabela-planejamento .separador-ente th {
  padding: 9px 12px;
  border-top: 2px solid var(--azul);
  background: #e7eff8;
  color: var(--azul);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}

.filtros-planilha {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  margin-top: 18px;
}

.filtros-planilha label {
  display: grid;
  flex: 1 1 170px;
  gap: 4px;
  color: var(--cinza);
  font-size: 12px;
}

.filtros-planilha label:first-child {
  flex: 0 1 420px;
}

.filtros-planilha + .menu-filtro {
  margin-top: 0;
}

.planejamento .tabela-planejamento {
  margin-top: 8px;
}

.monitoramento .filtro-coluna {
  padding: 0 4px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #b8cde3;
  cursor: pointer;
}

.filtro-coluna:hover {
  color: white;
  background: #ffffff25;
}

.menu-filtro {
  width: min(330px, calc(100vw - 32px));
  padding: 16px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: white;
  color: var(--texto);
  box-shadow: 0 8px 24px #00244d30;
}

.menu-filtro label {
  display: grid;
  gap: 6px;
  font-size: 12px;
}

/* Abre o menu junto à coluna nos navegadores com posicionamento por âncora. */
@supports (position-area: bottom) {
  [popovertarget$="-menu-situacao"] { anchor-name: --situacao; }
  [data-elemento="menu-situacao"] { position-anchor: --situacao; }

  .menu-filtro {
    inset: auto;
    margin: 6px 0 0;
    position-area: bottom;
    position-try-fallbacks: flip-inline, flip-block;
  }
}

.menu-filtro select,
.menu-filtro button {
  width: 100%;
  margin-top: 6px;
  padding: 9px;
  border: 1px solid var(--borda);
  border-radius: 5px;
  background: var(--fundo);
  color: var(--texto);
}

.filtros-planilha input,
.filtros-planilha select,
.filtros-planilha button {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: white;
  color: var(--texto);
}

.filtros-planilha button {
  width: auto;
  cursor: pointer;
}

.monitoramento {
  max-width: 1900px;
  padding: 24px 28px;
}

.monitoramento button,
.monitoramento input,
.monitoramento select,
[data-elemento="dialogo-saldo"] button,
[data-elemento="dialogo-saldo"] input,
[data-elemento="dialogo-saldo"] textarea,
[data-elemento="dialogo-anotacoes"] button,
[data-elemento="dialogo-anotacoes"] textarea {
  font: inherit;
}

.titulo-pagina,
.linha-secao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 18px;
}

.titulo-pagina h2 {
  margin: 0 0 8px;
}

.titulo-pagina p,
.texto-apoio {
  color: var(--cinza);
  font-size: 12px;
}

.titulo-pagina p {
  margin: 0;
}

.titulo-pagina a {
  color: var(--azul);
}

.aviso-previa {
  padding: 10px 14px;
  border-left: 3px solid #ba8700;
  background: #fff6dc;
  color: #69531a;
  font-size: 12px;
  margin: 0 0 22px;
}

.monitoramento h3 {
  margin: 0;
  color: var(--escuro);
  font-size: 17px;
}

.selecao-ente {
  margin-bottom: 24px;
  padding: 16px 20px;
  border: 1px solid var(--borda);
  border-left: 4px solid var(--azul);
  border-radius: 10px;
  background: white;
}

.selecao-ente .linha-secao {
  margin-bottom: 0;
}

.controles-ente {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 440px;
}

.controles-ente .campo-escolha {
  flex: 1 1 240px;
}

#situacao-selecao:empty {
  display: none;
}

.campo-escolha {
  display: grid;
  gap: 5px;
  width: min(100%, 440px);
  color: var(--cinza);
  font-size: 12px;
}

.campo-escolha select,
[data-elemento="dialogo-saldo"] input,
[data-elemento="dialogo-saldo"] textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--borda);
  border-radius: 6px;
  padding: 10px 12px;
  background: white;
  color: var(--texto);
}

.monitoramento :focus-visible,
[data-elemento="dialogo-saldo"] :focus-visible {
  outline: 3px solid #ad7b00;
  outline-offset: 3px;
}

.painel-individual {
  padding: 14px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: white;
  box-shadow: 0 2px 4px #00244d0a;
}

.painel-individual .linha-secao {
  margin-bottom: 10px;
}

.rotulo-secao {
  font-size: 12px;
  font-weight: 600;
  color: var(--cinza);
  margin: 0 0 8px;
}

.resumo-financeiro,
.cartoes-planejamento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.cartao-financeiro {
  display: grid;
  grid-template-rows: 28px auto 1fr;
  align-content: start;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid #edf1f7;
  border-radius: 6px;
  background: var(--fundo);
}

.cartao-financeiro h4,
.cartao-planejamento h4 {
  color: var(--cinza);
  font-size: 12px;
  font-weight: 500;
  margin: 0;
}

.cartao-financeiro strong,
.cartao-planejamento strong {
  display: block;
  font: 600 20px/1.3 var(--fonte-interface);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--azul);
}

.cartao-financeiro p,
.cartao-planejamento p {
  font-size: 12px;
  color: var(--cinza);
  margin: 0;
  line-height: 1.4;
}

.acao-secundaria,
.acao-principal {
  padding: 9px 14px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  cursor: pointer;
}

.acao-secundaria {
  background: white;
  color: var(--azul);
}

.cabecalho-cartao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.monitoramento .acao-saldo {
  flex-shrink: 0;
  padding: 3px 7px;
  border: 1px solid #bdcddd;
  border-radius: 4px;
  background: white;
  color: var(--azul);
  font-size: 11px;
  line-height: 1.5;
  cursor: pointer;
}

.acao-principal {
  background: var(--azul);
  color: white;
}

/* Planejamento tem sua própria seção para não se confundir com execução. */
.planejamento {
  margin-top: 20px;
}

.descricao-planejamento {
  margin: 8px 0 18px;
  color: var(--cinza);
  font-size: 13px;
}

.cartao-planejamento {
  display: grid;
  grid-template-rows: minmax(30px, auto) auto 1fr;
  gap: 4px;
  border: 1px solid var(--borda);
  border-left: 4px solid var(--azul);
  border-radius: 10px;
  padding: 12px 14px;
  background: white;
}

.recursos-humanos {
  border-left-color: #16824f;
}

.custeio {
  border-left-color: #d65000;
}

.investimento {
  border-left-color: #7930bf;
}

.recursos-humanos strong {
  color: #147146;
}

.custeio strong {
  color: #b44300;
}

.investimento strong {
  color: #7930bf;
}

/* Formulário demonstrativo de atualização manual. */
[data-elemento="dialogo-saldo"],
[data-elemento="dialogo-anotacoes"] {
  width: min(540px, calc(100vw - 32px));
  max-height: 90vh;
  padding: 26px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  color: var(--texto);
}

[data-elemento="dialogo-saldo"]::backdrop,
[data-elemento="dialogo-anotacoes"]::backdrop {
  background: #00244da6;
}

[data-elemento="dialogo-saldo"] label,
[data-elemento="dialogo-anotacoes"] label {
  display: block;
  margin: 16px 0 6px;
}

[data-elemento="dialogo-saldo"] textarea {
  resize: vertical;
}

[data-elemento="erro-saldo"] {
  color: #a21f1f;
}

.acoes-dialogo {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

@media (max-width: 1100px) {
  .resumo-financeiro,
  .cartoes-planejamento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .resumo-financeiro,
  .cartoes-planejamento {
    grid-template-columns: 1fr;
  }

  .painel-individual {
    padding: 12px;
  }
}

/* A tabela fica vazia até que o Administrador cadastre os itens. */
.tabela-planejamento {
  overflow-x: auto;
  border: 1px solid var(--borda);
  border-radius: 8px;
  margin-top: 22px;
  background: white;
}

.tabela-planejamento table {
  width: 100%;
  min-width: 1320px;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 12px;
}

/* Proporções fixas evitam que os campos alarguem a tabela. */
.largura-acoes {
  width: 8%;
}

.largura-categoria {
  width: 9%;
}

.largura-subcategoria {
  width: 8%;
}

.largura-descricao {
  width: 18%;
}

.largura-quantidade {
  width: 5%;
}

.largura-unidade {
  width: 6%;
}

.largura-valor {
  width: 9%;
}

.largura-total {
  width: 9%;
}

.largura-situacao {
  width: 14%;
}

.largura-execucao {
  width: 14%;
}

.tabela-planejamento caption {
  text-align: left;
  padding: 10px 12px;
  color: var(--cinza);
}

.tabela-planejamento th,
.tabela-planejamento td {
  padding: 7px 8px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--borda);
  overflow-wrap: anywhere;
}

.tabela-planejamento thead {
  background: var(--escuro);
  color: white;
}

.tabela-planejamento th {
  font-weight: 600;
}

.tabela-planejamento thead th {
  padding: 11px 8px;
  font-size: 11px;
  text-transform: uppercase;
}

.tabela-planejamento .numero {
  text-align: right;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}

.tabela-planejamento .tabela-vazia {
  padding: 36px 18px;
  text-align: center;
  color: var(--cinza);
}

.tabela-planejamento tfoot {
  background: #edf3f9;
  font-weight: 600;
}

/* Edição direta nas células, com o total calculado ao lado. */
.barra-planilha {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 22px;
}

.barra-planilha + .tabela-planejamento {
  margin-top: 10px;
}

.tabela-planejamento .celula-editavel {
  padding: 5px 3px;
  border-right: 1px solid #edf1f7;
}

.campo-celula {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 5px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--texto);
}

.monitoramento .tabela-planejamento input,
.monitoramento .tabela-planejamento select {
  font-size: 12px;
}

.tabela-planejamento input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.tabela-planejamento input[type="number"]::-webkit-inner-spin-button,
.tabela-planejamento input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.campo-celula[type="number"],
.campo-celula[data-campo="valorUnitario"] {
  text-align: right;
  font-variant-numeric: lining-nums tabular-nums;
}

.campo-celula:hover {
  border-color: var(--borda);
}

.campo-celula:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 0;
  background: #f2f7fd;
}

.campo-celula[aria-invalid="true"] {
  border-color: #b52a2a;
}

.linha-incompleta .total-calculado {
  background: #fff9e9;
}

.aviso-linha {
  display: block;
  max-width: 160px;
  margin-top: 3px;
  white-space: normal;
  color: #735817;
  font-size: 11px;
}

.aviso-linha:empty,
.erro-execucao:empty {
  display: none;
}

/* Ações no início e acompanhamento da execução no fim da linha. */
.tabela-planejamento .coluna-acoes {
  padding: 5px;
}

.acoes-na-linha {
  display: flex;
  gap: 2px;
}

.monitoramento .acao-linha {
  min-width: 22px;
  min-height: 32px;
  padding: 3px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  font-size: 14px;
  cursor: pointer;
}

.acao-linha:hover:not(:disabled) {
  border-color: var(--borda);
  background: #edf3f9;
}

.acao-linha:disabled {
  opacity: 0.3;
  cursor: default;
}

.mover-na-linha {
  color: var(--azul);
}

/* Mantém as setas acessíveis pelo teclado e em dispositivos de toque. */
@media (hover: hover) and (pointer: fine) {
  .monitoramento .mover-na-linha {
    opacity: 0;
  }

  .tabela-planejamento tr:hover .mover-na-linha:not(:disabled),
  .tabela-planejamento tr:focus-within .mover-na-linha:not(:disabled) {
    opacity: 0.65;
  }

  .monitoramento .mover-na-linha:focus-visible,
  .monitoramento .mover-na-linha:hover:not(:disabled) {
    opacity: 1;
  }
}

.tabela-planejamento tbody tr:focus-within {
  background: #f2f7fd;
}

.total-calculado {
  background: #f5f8fb;
  font-weight: 600;
}

.adicionar-na-linha {
  color: #147146;
  font-weight: 700;
}

.apagar-na-linha {
  color: #64748b;
}

.situacao-anotacoes {
  display: flex;
  align-items: center;
  gap: 4px;
}

.selecao-situacao {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 5px;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  background: #f8fafc;
  color: #475569;
}

.selecao-situacao[data-situacao="execucao"] {
  color: #004080;
  border-color: #97bce8;
  background: #eaf2fc;
}

.selecao-situacao[data-situacao="pausado"] {
  color: #b34405;
  border-color: #f6bc95;
  background: #fff5ed;
}

.selecao-situacao[data-situacao="ajuste"] {
  color: #805b00;
  border-color: #e5c964;
  background: #fff9db;
}

.selecao-situacao[data-situacao="executado"] {
  color: #126637;
  border-color: #99d4b5;
  background: #eaf8f0;
}

.selecao-situacao[data-situacao="cancelado"] {
  color: #a12c2c;
  border-color: #e9a6a6;
  background: #fff0f0;
}

.monitoramento .botao-anotacoes {
  position: relative;
  flex-shrink: 0;
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 2px;
  border: 1px solid #9bb9d7;
  border-radius: 50%;
  background: #edf5fc;
  font-size: 16px;
  cursor: pointer;
}

.botao-anotacoes.tem-anotacoes::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 8px;
  border: 2px solid white;
  border-radius: 50%;
  background: #1262a3;
}

.entrada-execucao {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid var(--borda);
  border-radius: 5px;
  background: white;
}

.entrada-execucao span {
  flex-shrink: 0;
  color: var(--cinza);
  font-size: 12px;
}

.valor-executado-item {
  flex: 1;
  width: 0;
  min-width: 0;
  min-height: 30px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--azul);
  text-align: right;
  font-variant-numeric: lining-nums tabular-nums;
}

.entrada-execucao:focus-within {
  border-color: var(--azul);
  outline: 2px solid var(--azul);
  outline-offset: 1px;
}

.monitoramento .valor-executado-item:focus-visible {
  outline: none;
}

@media (max-width: 800px) {
  .monitoramento {
    padding: 20px 16px;
  }
}

/* Em telas de toque, preserve uma área confortável para acionar os controles. */
@media (pointer: coarse) {
  .campo-celula,
  .selecao-situacao,
  .monitoramento .acao-linha,
  .monitoramento .botao-anotacoes,
  .valor-executado-item {
    min-height: 44px;
  }
}

.erro-execucao {
  display: block;
  color: #a21f1f;
  margin-top: 5px;
}

.valor-executado-item[aria-invalid="true"] {
  outline: 1px solid #a21f1f;
}

[data-elemento="dialogo-anotacoes"] textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  resize: vertical;
}

[data-elemento="dialogo-anotacoes"] :focus-visible {
  outline: 3px solid #ad7b00;
  outline-offset: 3px;
}