/*
    ESTILOS GERAIS E MODERNIZAÇÃO
    Focando em tipografia limpa, espaçamento adequado e sombras sutis para profundidade.
*/

body {
    font-family: 'Open Sans', sans-serif; /* Define uma fonte padrão moderna e legível para todo o corpo. Certifique-se de importar essa fonte (ex: Google Fonts) no seu HTML. */
    color: #444; /* Cor de texto mais suave para o corpo, melhor legibilidade. */
    line-height: 1.6; /* Espaçamento entre linhas para melhor leitura. */
    background-color: #f8f9fa; /* Um fundo mais claro e moderno para a página. */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif; /* Use uma fonte mais impactante para títulos. Certifique-se de importar essa fonte. */
    font-weight: 600; /* Peso médio para títulos, mais sofisticado que o negrito puro. */
    color: #333; /* Cor mais escura para os títulos. */
    margin-top: 20px; /* Margem superior padrão para títulos. */
    margin-bottom: 10px; /* Margem inferior padrão para títulos. */
}

/*
    ESTILOS DE LABELS E CAMPOS DE FORMULÁRIO
    Foco na clareza e no design minimalista.
*/

.labels_form {
    font-size: 16px; /* Tamanho da fonte levemente ajustado para melhor proporção. */
    font-weight: 600; /* Peso de fonte médio para destaque sem ser excessivo. */
    color: #333; /* Cor de texto padrão para labels. */
    margin-bottom: 5px; /* Espaçamento sutil abaixo das labels, para separação do input. */
    display: block; /* Garante que cada label esteja em uma nova linha. */
    /* Removidos estilos de borda, border-radius e box-shadow do .labels_form. */
    /* Esses estilos geralmente pertencem aos inputs/selects, não às labels em si,
       para um visual mais limpo e elegante da label. */
}

/* Estilo para campos de input e select, para dar a eles o visual moderno */
.form_input,
.selector_overlay select, /* Alvo os selects dentro de .selector_overlay */
input[type="date"],
input[type="time"] { /* Adicionado para garantir que todos os inputs de data/hora sigam o padrão */
    border: 1px solid #ced4da; /* Borda mais fina e discreta. */
    border-radius: 8px; /* Cantos levemente arredondados, mais modernos. */
    padding: 12px 15px; /* Aumentado o padding para mais espaço interno e altura. */
    background-color: #ffffff; /* Fundo branco puro para os campos. */
    width: 100%; /* Garante que ocupe toda a largura disponível. */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.075); /* Sombra interna sutil para profundidade. */
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Transições suaves ao focar. */
    font-size: 16px; /* Tamanho da fonte para o input. */
    color: #495057; /* Cor do texto do input. */
}

.form_input:focus,
.selector_overlay select:focus,
input[type="date"]:focus,
input[type="time"]:focus {
    border-color: #80bdff; /* Borda azul clara ao focar. */
    outline: 0; /* Remove o outline padrão do navegador. */
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); /* Sombra de foco sutil, comum em designs modernos. */
}


/*
    ESTILOS DE LISTAGEM (POSTS)
    Melhorando a clareza e o espaçamento.
*/

.textos_list {
    font-size: 18px; /* Tamanho de fonte maior para o título principal da lista. */
    font-weight: 700; /* Mantido o negrito para o título. */
    padding: 0; /* Removido padding, pois o padding do pai (post_details) é suficiente. */
    display: block; /* Garante que o título ocupe a linha inteira. */
    margin-bottom: 5px; /* Espaçamento abaixo do título principal. */
}

.subtitulo_list {
    font-size: 13px; /* Tamanho de fonte ligeiramente maior para subtítulos. */
    color: #6c757d; /* Cor de texto mais suave para os detalhes. */
    padding: 0;
    margin-top: 0; /* Zerado margin-top para controle total pelo line-height e margin-bottom. */
    line-height: 1.4; /* Melhora a legibilidade. */
    margin-bottom: 3px; /* Espaçamento entre os subtítulos. */
}

/*
    ESTILOS DE POPOUPS E TABELAS DE DADOS
    Consistência visual e separação de elementos.
*/

.page_title_dados {
    font-size: 20px; /* Tamanho de fonte do título do popup de dados. */
    line-height: 1.4; /* Espaçamento entre linhas. */
    font-weight: 600; /* Peso da fonte. */
    padding: 15px 20px; /* Preenchimento maior para o título. */
    margin-top: -10px; /* Ajuste para alinhar. */
    background: #007bff; /* Cor de fundo primária para o título (azul). */
    color: #ffffff; /* Cor do texto branco. */
    border-radius: 8px 8px 0 0; /* Apenas cantos superiores arredondados, para se encaixar com o conteúdo. */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); /* Sombra mais pronunciada para destaque. */
    text-align: center; /* Centraliza o texto. */
    transition: background-color 0.3s ease; /* Transição mais rápida. */
}

.page_title_dados:hover {
    background: #0056b3; /* Tom mais escuro de azul ao passar o mouse. */
}

.tabela_dados {
    background: #ffffff !important; /* Fundo branco para a tabela, contrastando com o fundo da página. */
    font-size: 14px; /* Tamanho de fonte legível. */
    border-collapse: collapse; /* Para tabelas, garante bordas limpas. */
    width: 100%; /* Garante que a tabela ocupe toda a largura. */
    border-radius: 0 0 8px 8px; /* Cantos inferiores arredondados. */
    overflow: hidden; /* Garante que os border-radius sejam aplicados corretamente. */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Sombra sutil para a tabela. */
}

.celula_tabela {
    background: #ffffff !important; /* Fundo branco para as células. */
    padding: 12px 15px; /* Padding para cada célula. */
    border-bottom: 1px solid #eee; /* Borda inferior fina para separar as linhas. */
}
.celula_tabela:last-child {
    border-bottom: none; /* Remove a borda da última célula. */
}


.page_title_excluir {
    font-size: 18px; /* Tamanho de fonte maior para o título de exclusão. */
    line-height: 1.4;
    font-weight: 600;
    padding: 15px 20px;
    margin-top: -15px; /* Ajuste para alinhamento. */
    background: #dc3545; /* Cor vermelha para indicar ação de exclusão. */
    color: #fff;
    border-radius: 8px 8px 0 0; /* Cantos superiores arredondados. */
    text-align: center;
}

.botoes_excluir {
    background: #ffffff !important; /* Fundo branco para o contêiner dos botões de exclusão. */
    font-size: 14px;
    padding: 15px;
    border-radius: 0 0 8px 8px; /* Cantos inferiores arredondados. */
    border-top: 1px solid #eee; /* Borda superior para separar do título. */
}

/*
    ESTILOS DE BOTÕES
    Consistência e feedback visual.
*/

.botao_salvar {
    color: #fff !important;
    font-size: 16px !important; /* Tamanho de fonte mais legível. */
    background-color: #28a745 !important; /* Verde mais vibrante para salvar. */
    border-radius: 8px !important; /* Cantos mais arredondados. */
    height: 48px; /* Altura padrão para botões. */
    display: flex; /* Para alinhar o conteúdo e o ícone. */
    align-items: center; /* Alinhamento vertical. */
    justify-content: center; /* Centraliza o texto. */
    transition: background-color 0.3s ease, box-shadow 0.2s ease; /* Transições suaves. */
    /* background-image, background-repeat, background-position, padding-left movidos/ajustados se necessário via JS ou classes específicas */
}
.botao_salvar:hover {
    background-color: #218838 !important; /* Tom mais escuro ao passar o mouse. */
    box-shadow: 0 4px 8px rgba(40,167,69,0.2); /* Sombra ao passar o mouse. */
}


.botao_modelo {
    width: 100%;
    padding: 12px 15px; /* Padding uniforme para todos os botões modelo. */
    font-weight: 600; /* Peso da fonte mais encorpado. */
    text-align: center;
    cursor: pointer;
    font-size: 16px; /* Tamanho de fonte padrão. */
    border: none;
    border-radius: 8px; /* Cantos arredondados. */
    transition: background-color 0.3s ease, box-shadow 0.2s ease;
}

.botao_excluir {
    color: #fff !important;
    background-color: #dc3545 !important; /* Vermelho padrão. */
}
.botao_excluir:hover {
    background-color: #c82333 !important; /* Tom mais escuro ao passar o mouse. */
    box-shadow: 0 4px 8px rgba(220,53,69,0.2);
}

.botao_cancelar {
    color: #fff !important;
    background-color: #6c757d !important; /* Cinza mais neutro. */
}
.botao_cancelar:hover {
    background-color: #5a6268 !important; /* Tom mais escuro ao passar o mouse. */
    box-shadow: 0 4px 8px rgba(108,117,125,0.2);
}

.limpar_botao {
    background: transparent;
    border: none;
    color: #007bff; /* Cor primária para botões de texto. */
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.limpar_botao:hover {
    background-color: rgba(0,123,255,0.1);
}

.desabilitar_botao {
    color: #adb5bd !important; /* Cor mais clara para desabilitado. */
    cursor: not-allowed;
    opacity: 0.7; /* Mantido para indicar desabilitado. */
    text-decoration: none;
}

.botao_modelo_popup {
    width: 100%;
    padding: 12px 15px; /* Padding uniforme. */
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    background-color: #007bff; /* Cor primária. */
    color: #fff;
    border: none;
    border-radius: 8px;
    transition: background-color 0.3s ease, box-shadow 0.2s ease;
}
.botao_modelo_popup:hover {
    background-color: #0056b3;
    box-shadow: 0 4px 8px rgba(0,123,255,0.2);
}


/*
    ESTILOS DIVERSOS E UTILITÁRIOS
*/

.ocultar {
    display: none !important;
}

/* O .h1 e .p no CSS atual parecem ser seletores para tags HTML, não classes.
   Sugiro usar seletores de tag diretos ou classes como 'title-main', 'text-body'.
   Se pretende que sejam classes, use a sintaxe ".h1 { ... }"
*/
/*
.h1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

.p {
  font-size: 16px;
  line-height: 1.5;
}
*/

/* O .input-field não existia em seus arquivos PHP. Presumo que seja para inputs em geral.
   Se ele deve ser usado, a lógica anterior para inputs já o cobre.
*/
/*
.input-field {
  border: 1px solid #ddd;
  border-radius: 14px;
  padding: 10px;
  background-color: #f9f9f9;
}

.input-field:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}
*/

/* Estilos para o cabeçalho (apenas como sugestão, depende do seu cabecalho.php) */
/*
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px; /* Altura padrão mais comum para cabeçalhos móveis */
  background: linear-gradient(to right, #0056b3, #007bff); /* Fundo azul gradiente */
  z-index: 1000; /* Garante que o cabeçalho fique acima de tudo */
  box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Sombra para dar profundidade */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px; /* Espaçamento lateral */
}

.header .logo {
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    line-height: 1; /* Ajuste para não ter espaçamento extra */
}

.header .nav-icon {
    width: 28px; /* Tamanho do ícone */
    height: 28px;
    display: flex; /* Para centralizar o ícone */
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.header .nav-icon img {
    width: 100%;
    height: 100%;
    filter: brightness(0) invert(1); /* Para ícones pretos em fundo claro, torna-os brancos */
}

/* Estilos para o menu responsivo - ajuste conforme necessário */
@media (max-width: 768px) {
  /* ... Estilos para telas menores ... */
}
*/