/* ==========================================================
   ESTILO UNIFICADO E ROBUSTO PARA TABELAS (COM CSS GRID)
   ========================================================== */

.tabela-container {
    padding: 40px 20px;
    text-align: center;
}

.tabela-container h2 {
    font-size: 28px;
    color: #003366;
    margin-bottom: 30px;
}

/* --- Container Principal da Grade --- */
.tabela {
    display: grid; /* Ativa o layout de grade */
    max-width: 900px;
    margin: 0 auto;
    border: 1px solid #ccc;
    border-radius: 10px;
    overflow: hidden;
    font-family: Rubik, sans-serif;
    font-size: 16px;
}

/* --- Estilo Padrão para Todas as Células --- */
.tabela-celula {
	color: #002352;
    padding: 14px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #f9f9f9;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    transition: background-color 0.2s ease-in-out;
}

/* Efeito de hover geral */
.tabela:hover .tabela-celula {
    /* Este seletor é intencional para evitar que o hover de uma célula afete outras em layouts complexos */
}
.tabela-celula:hover {
    background-color: #e9e9e9;
}


/* ==========================================================
   VARIAÇÃO: Tabela de 2 Colunas
   ========================================================== */

.tabela.tabela--2-colunas {
    grid-template-columns: 1fr 1fr; /* Define 2 colunas de larguras iguais */
}

/* Cabeçalho da tabela de 2 colunas (as 2 primeiras células) */
.tabela--2-colunas .tabela-celula:nth-child(-n+2) {
    background-color: #002352;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
}

/* Remove a borda direita da última coluna */
.tabela--2-colunas .tabela-celula:nth-child(2n) {
    border-right: none;
}

/* Remove a borda inferior da última linha */
.tabela--2-colunas .tabela-celula:nth-last-child(-n+2) {
    border-bottom: none;
}

/* Estiliza a primeira coluna (células ímpares após o cabeçalho) */
.tabela--2-colunas .tabela-celula:nth-child(2n+1):not(:nth-child(1)) {
    font-weight: bold;
}

/* ==========================================================
   VARIAÇÃO: Tabela de 4 Colunas
   ========================================================== */

.tabela.tabela--4-colunas {
    grid-template-columns: 2.5fr 1.5fr 1fr 2fr; /* Define 4 colunas com larguras personalizadas */
}

/* Cabeçalho da tabela de 4 colunas (as 4 primeiras células) */
.tabela--4-colunas .tabela-celula:nth-child(-n+4) {
    background-color: #002352;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
}

/* Remove a borda direita da última coluna */
.tabela--4-colunas .tabela-celula:nth-child(4n) {
    border-right: none;
}

/* Remove a borda inferior da última linha */
.tabela--4-colunas .tabela-celula:nth-last-child(-n+4) {
    border-bottom: none;
}

/* Estiliza e alinha a primeira coluna de dados */
.tabela--4-colunas .tabela-celula:nth-child(4n+1):not(:nth-child(1)) {
    font-weight: bold;
    justify-content: flex-start;
    text-align: left;
}

/* ==========================================================
   RESPONSIVIDADE (Simplificada e Unificada)
   ========================================================== */

@media (max-width: 768px) {
    .tabela {
        display: block; /* Desativa a grade e volta ao fluxo normal */
        border: none;
        border-radius: 0;
        background-color: transparent;
    }
    .tabela-celula {
        display: block; /* Cada célula vira um bloco */
        width: 100%;
        text-align: left;
        border: none !important; /* Remove todas as bordas internas */
        padding: 8px 12px;
        background-color: #f9f9f9;
    }

    /* Esconde todo o cabeçalho em qualquer tabela */
    .tabela .tabela-celula:nth-child(-n+4) {
        display: none;
    }

    /* Estilo mobile para 2 colunas */
     .tabela--2-colunas .tabela-celula:nth-child(odd) {
        font-weight: bold;
        background-color: #eef4fb;
    }
     .tabela--2-colunas .tabela-celula:nth-child(even) {
        margin-bottom: 15px; /* Espaço entre os contatos */
        border-bottom: 2px solid #ccc;
    }

    /* Adiciona títulos e separadores para a tabela de 4 colunas */
    .tabela--4-colunas .tabela-celula {
        border-bottom: 1px solid #eee;
        padding-left: 20px;
    }
    .tabela--4-colunas .tabela-celula:nth-child(4n) {
        border-bottom: 2px solid #ccc;
        margin-bottom: 15px;
    }
    .tabela--4-colunas .tabela-celula::before {
        font-weight: bold; margin-right: 8px;
    }
    .tabela--4-colunas .tabela-celula:nth-child(4n+1)::before { content: 'Cargo:'; }
    .tabela--4-colunas .tabela-celula:nth-child(4n+2)::before { content: 'Servidor:'; }
    .tabela--4-colunas .tabela-celula:nth-child(4n+3)::before { content: 'Telefone:'; }
    .tabela--4-colunas .tabela-celula:nth-child(4n+4)::before { content: 'E-mail:'; }
}

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.acordos-tabela.acordos--5-colunas {
  display: grid;
  grid-template-columns: 1fr 3fr 2fr 1.5fr 2fr;
  grid-template-rows: repeat(4, auto); /* 1 linha de cabeçalho + 3 linhas de dados */
  max-width: 900px;
  margin: 0 auto;
  border: 1px solid #ccc;
  border-radius: 10px;
  overflow: hidden;
  font-family: Rubik, sans-serif;
  font-size: 16px;
}

/* Aplica estilo padrão para todas as células */
.acordos-celula {
  padding: 14px 12px;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #f9f9f9;
  color: #002352;
  transition: background-color 0.2s ease-in-out;
}
.acordos-celula:hover {
  background-color: #e9e9e9;
}

/* Remover borda da última coluna */
.acordos-celula:nth-child(5n) {
  border-right: none;
}

/* Remover borda da última linha */
.acordos-celula:nth-last-child(-n+5) {
  border-bottom: none;
}

/* Estilo do cabeçalho (primeira linha) */
.acordos-celula:nth-child(-n+5) {
  background-color: #002352;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
}

/* Posiciona cada célula explicitamente (1-based index) */
.acordos-celula:nth-child(1) { grid-column: 1; grid-row: 1; } /* Ano (Cabeçalho) */
.acordos-celula:nth-child(2) { grid-column: 2; grid-row: 1; } /* Empresa */
.acordos-celula:nth-child(3) { grid-column: 3; grid-row: 1; } /* Valor Acordado */
.acordos-celula:nth-child(4) { grid-column: 4; grid-row: 1; } /* Prazo */
.acordos-celula:nth-child(5) { grid-column: 5; grid-row: 1; } /* Extrato */

/* Linha 2 (dados 1) */
.acordos-celula:nth-child(6) { grid-column: 1; grid-row: 2; }
.acordos-celula:nth-child(7) { grid-column: 2; grid-row: 2; }
.acordos-celula:nth-child(8) { grid-column: 3; grid-row: 2; }
.acordos-celula:nth-child(9) { grid-column: 4; grid-row: 2; }
.acordos-celula:nth-child(10) { grid-column: 5; grid-row: 2; }

/* Linha 3 (dados 2) */
.acordos-celula:nth-child(11) { grid-column: 1; grid-row: 3; }
.acordos-celula:nth-child(12) { grid-column: 2; grid-row: 3; }
.acordos-celula:nth-child(13) { grid-column: 3; grid-row: 3; }
.acordos-celula:nth-child(14) { grid-column: 4; grid-row: 3; }
.acordos-celula:nth-child(15) { grid-column: 5; grid-row: 3; }

/* Linha 4 (dados 3) */
.acordos-celula:nth-child(16) { grid-column: 1; grid-row: 4; }
.acordos-celula:nth-child(17) { grid-column: 2; grid-row: 4; }
.acordos-celula:nth-child(18) { grid-column: 3; grid-row: 4; }
.acordos-celula:nth-child(19) { grid-column: 4; grid-row: 4; }
.acordos-celula:nth-child(20) { grid-column: 5; grid-row: 4; }

/* Estilo do link dentro da coluna "Extrato" */
.acordos-celula a {
  color: #002352;
  text-decoration: underline;
  font-weight: 500;
}
.acordos-celula a:hover {
  color: #004080;
}