:root {
  /* Cores Principais */
  --amarelo-dourado: #f4c046;      /* Amarelo/Dourado */
  --laranja-escuro: #ed841e;      /* Laranja Escuro */
  --elementos-azuis: #007bff;     /* azul */

  /* Cores de Fundo */
  --bege-cornsilk: #F5F5DC;    /* Bege / Cornsilk (Era 'Cinza claro', impreciso) */
  --cinza-muito-claro: #f8f9fa; /* Cinza Muito Claro / Branco Sujo (Era 'Azul claro', incorreto) */

  /* Cores de Texto */
  --cor-do-texto: #333333;    /* Cinza Escuro (Correta) */
  --cor-texto-link: #495057;  /* Cinza Azulado (Era 'cor do texto do link', mais descritivo) */

  /* Cores de Feedback (Sucesso e Erro) */
  --cor-de-sucesso: #078123;  /* Verde Escuro / Floresta (Correta) */
  --cor-de-sucesso-bg: #cff9d9; /* Verde Pastel / Menta Claro (Era 'Verde Claro', mais descritivo) */
  --cor-de-erro: #d9534f;     /* Vermelho Laranja / Coral (Era 'Vermelho', mais descritivo) */
  --cor-erro-bg: #f2dede;     /* Rosa Pastel / Vermelho Muito Claro (Era 'Vermelho Claro', mais descritivo) */
  --cor-inativo: #fff748;     /* Amarelo destaque, exibida no fundo da tabela para pacientes e usuarios inativos */

  /* Neutras e Tabela */
  --branco: #fff;             /* Branco (Correta) */
  --cor-fundo-tabela: #fff3d5; /* Amarelo Pálido / Verde Limão Claro */
  --cor-borda-tabela: #ddd;    /* Cinza Claro (Correta) */
  --cor-divisoria: #dee2e6;    /* Cinza Muito Claro / Azul Acinzentado (Correta) */
  --cor-banner: #666666;      /* Cinza Médio (Correta) */

  /* legendas e indicações de presencial e online */
  --cor-presencial: #abffae; /* verde claro */
  --cor-online: #cbf1ff; /* azul claro */
}

/* Estilos gerais */
body {
    font-family: sans-serif;
    background-color: var(--bege-cornsilk);
    color: var(--cor-do-texto);
    background-image: url('../images/fundo-claro.png');
    background-size: cover; 
    background-repeat: repeat;
    background-attachment: fixed;
}

.container {
    max-width: 800px;
    margin: 50px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: var(--branco);
}

.container-full {
    width: 95%;
    margin: 50px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: var(--branco);
}

.container-enderecos {
  display: flex;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: var(--bege-cornsilk);
}

.coluna-endereco {
  width: 50%; /* duas colunas iguais */
  text-align: left;
}

.mensagem {
    margin: 0 auto;
    text-align: center;
}

h2 {
    color: var(--amarelo-dourado);
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    border: 1px solid var(--cor-borda-tabela);
    padding: 8px;
    text-align: left;
}

th {
    background-color: var(--cor-fundo-tabela);
}

.caixa {
  display: flex;
  padding: 10px;
  justify-content: center;
}

/* --- Estilos para o formulário de login --- */
.container form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.container input[type="time"], 
.container input[type="date"] {
    /* width: 100%; */
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.container input[type="email"],
.container input[type="text"],
.container select,
.container input[type="password"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.container button, .container-full button {
    width: 100%;
    background-color: var(--amarelo-dourado);
    color: white;
    padding: 10px; 
    margin-top: 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.container button:hover, .container-full button:hover {
    background-color: var(--laranja-escuro);
}

.container .success-message {
    color: var(--cor-de-sucesso);
    background-color: var(--cor-de-sucesso-bg);
    border: 1px solid #ebccd1;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
}

.container .error {
    color: var(--cor-de-erro);
    background-color: var(--cor-erro-bg);
    border: 1px solid #ebccd1;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
}

/* estilo de formulário mínimo */
form.minimo {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

form.minimo select {
    width:100%;
}

form.minimo .botoes-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
}

/* forms mais específicos dentro dos containers */
.container .form-minimo {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: space-evenly;
    align-items: center;
}

.container .form-minimo select {
    font-size: 0.8em;
    padding: 5px;
}

/* --- Estilos da página inicial --- */
.initial-page {
    text-align: center;
}
.initial-page h1 {
    color: var(--amarelo-dourado);
    font-size: 2.5em;
}
.initial-page p {
    font-size: 1.5em;
    color: #555;
}
.initial-page .btn {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 20px;
    background-color: var(--amarelo-dourado);
    color: var(--branco);
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}
.initial-page .btn:hover {
    background-color: var(--laranja-escuro);
}

/* Container do menu */
.menu {
    list-style-type: none; /* Remove os marcadores de lista */
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; /* Empilha os itens verticalmente */
    width: 250px; /* Define uma largura fixa para o menu */
    background-color: var(--cinza-muito-claro); /* Cor de fundo suave */
    border-right: 1px solid var(--cor-divisoria); /* Linha divisória à direita */
}

/* Estilo para cada item do menu */
.menu li {
    margin: 0;
}

/* Estilo para os botões (links) */
.menu a {
    display: block; /* Ocupa a largura total do item da lista */
    padding: 15px 20px;
    text-decoration: none; /* Remove o sublinhado */
    color: var(--cor-texto-link);
    font-size: 1em;
    font-weight: 500;
    border-bottom: 1px solid var(--cor-divisoria); /* Linha divisória entre os botões */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Efeito ao passar o mouse */
.menu a:hover {
    background-color: #e9ecef;
    color: var(--amarelo-dourado);
}

/* Estilo para dar a aparência de link ao título e indicar que é clicável */
#menu-toggle {
    cursor: pointer;
    color: blue; /* Para simular um link */
    text-decoration: underline; /* Para simular um link */
    display: inline-block; /* Importante para o mouseout funcionar corretamente */
    padding: 5px; /* Adiciona uma área de 'acerto' para o mouse */
}

.btRelatorio {
    list-style-type: none; /* Remove os marcadores de lista */
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; 
    width: 100%; 
    background-color: var(--cinza-muito-claro); 
    border-right: 1px solid var(--cor-divisoria); 
}

.btRelatorio a {
    display: block; /* Ocupa a largura total do item da lista */
    padding: 15px 20px;
    text-decoration: none; /* Remove o sublinhado */
    color: var(--cor-texto-link);
    font-size: 1em;
    font-weight: 500;
    border-bottom: 1px solid var(--cor-divisoria); /* Linha divisória entre os botões */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.relatorio-link {
    font-size: 1em;
}

/* Estilos para o cabeçalho principal */
.main-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 20px;
    background-color: var(--cor-banner);
    border-bottom: 1px solid var(--cor-divisoria);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.logo-container {
    margin-right: 20px;
}

.logo-image {
    height: 50px; /* Ajuste o tamanho da sua imagem conforme necessário */
    width: auto;
}

.site-title h1 {
    font-size: 1.8em;
    color: var(--branco);
    margin: 0;
}

/* Estilos para o rodapé principal */
.main-footer {
    display: flex;
    justify-content: space-between;
/*    align-items: center; */
    padding: 20px;
    background-color: var(--cor-banner); 
    color: var(--branco);
}

/* Estilo para o parágrafo dentro do footer */
.main-footer p {
    margin: 0;
    font-size: 0.9em;
    padding: 5px;
}

.main-footer .esquerda {
    margin-right: auto;
    text-align: left;
}

.main-footer .direita {
    text-align: right;
}

.main-footer .direita p {
    margin-right: auto;
    text-align: right;
}

.main-footer a {
    text-decoration: underline;
    color: var(--branco);
}


/* Estilo para o forms */

.form-group {
    margin-bottom: 20px;
}

.radio-group {
    display: flex;
    gap: 15px; /* Adiciona espaço entre os botões de rádio */
    flex-wrap: wrap; /* Permite que os itens quebrem a linha se não houver espaço */
}

.radio-group input[type="radio"] {
    display: none; /* Esconde o botão de rádio padrão */
}

.radio-group label {
    padding: 8px 15px;
    border: 1px solid #ccc;
    border-radius: 20px;
    cursor: pointer;
    background-color: #f9f9f9;
    transition: background-color 0.3s, border-color 0.3s;
}

.radio-group input[type="radio"]:checked + label {
    background-color: var(--elementos-azuis); /* Cor quando selecionado */
    color: white;
    border-color: var(--elementos-azuis);
}

.radio-group label:hover {
    background-color: #e9ecef;
}

.form-grid {
  display: grid;
  gap: 16px;
  max-width: 600px;
}

.form-row-1 {
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: center;
  gap: 10px;
}

.form-row-3 {
  display: grid;
  grid-template-columns: 150px 1fr 1fr;
  align-items: center;
  gap: 10px;
}

.periodo-label {
  font-weight: bold;
}

.form-row-3 label {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 4px;
}

.hora {
  max-width: 300px;
}

.btHora {
  margin-top: 20px;
}

.form-row-checkbox {
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: center;
  gap: 10px;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: normal;
}


/* estilo para calendari minimo (menor) nas paginas */
.calendar-container-minimo {
    max-width: 300px;
    margin: 5px auto;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-align: center;
    background-color: #fff;
}

.calendar-container-minimo h3 {
    margin-top: 10px;
    margin-bottom: 10px;
    color: var(--elementos-azuis);
}

/* Estilos para o calendário */

.calendar-container {
    max-width: 800px;
    margin: 5px auto;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-align: center;
    background-color: #fff;
}

.calendar-container h3 {
    margin-top: 10px;
    margin-bottom: 10px;
    color: var(--elementos-azuis);
}

.calendar-table {
    width: 100%;
    border-collapse: collapse;
}

.calendar-table th, .calendar-table td {
    padding: 5px;
    border: 1px solid #eee;
    text-align: center;
    vertical-align: top;
    height: 10px;
    width:14%
}

.calendar-table th {
    background-color: #f8f9fa;
    color: #495057;
    font-weight: bold;
}

.calendar-day {
    position: relative;
}

.calendar-day a, .weekend-day a {
    text-decoration: none;
    color: #333;
}

.calendar-day span {
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 5px;
}

.calendar-day:hover {
    background-color: #e9ecef;
}

.weekend-day {
    background-color: #f2f2f2; /* Cinza claro */
}

/* estilos para o calendario na página de gestão */

.calendar-container-gestao {
    width: 95%;
    margin: 5px auto;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-align: center;
    background-color: #fff;
    overflow-y: auto; /* permite rolagem se ficar muito largo */
}

.calendar-container-gestao h3 {
    margin-top: 10px;
    margin-bottom: 10px;
    color: var(--elementos-azuis);
}

.calendar-table-gestao {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.calendar-table-gestao th, .calendar-table-gestao td {
    padding: 5px;
    border: 1px solid #eee;
    text-align: center;
    vertical-align: top;
    height: 10px;
}

.calendar-table-gestao th {
    background-color: #f8f9fa;
    color: #495057;
    font-weight: bold;
    text-align: center;
}

span.presencial {
    background-color: var(--cor-presencial) ; /* verde claro */
    text-align: left;
    padding: 5px;
}

.link-consulta {
    /* É crucial que o elemento pai direto da imagem tenha position: relative */
    position: relative;
    /* Garante que o link ocupe o espaço total da célula, se for o caso */
    display: block;
    height: 100%;
    box-sizing: border-box;
}

.icone-info {
    position: absolute; /* Posição relativa ao contêiner mais próximo com position: relative */
    top: 1px;
    right: 1px;
    z-index: 10;
}

span.online {
    background-color: var(--cor-online); /* azul claro */
    text-align: left;
    padding: 5px;
}

/* Formatacao de horário indisponível na agenda */
span.indisponivel {
    /* background-color:#f0f0f0; */
    color: #1c1c1c;
    padding: 2px 5px;
    /* border-radius: 10px; */
    /* border: 1px solid #000; */ 
    font-size: 0.9em;
}

span.feriado {
    display: inline-block;
    width: 100px;
    background-color: var(--cor-de-sucesso-bg);
    overflow-wrap: break-word;
    font-size: 0.8em;
}

span.evento {
    display: inline-block;
    width: 100px;
    background-color: var(--cor-de-sucesso-bg);
    overflow-wrap: break-word;
    font-size: 0.8em;
}


span.niver {
    display: inline-block;
    width: 100px;
    background-color: var(--cor-erro-bg);
    overflow-wrap: break-word;
    font-size: 0.8em;
}


/* formatação de exibição de consultas agendadas */
.destaqueConsulta {
    background-color:#f0f0f0;
    color: #000000;
    padding: 2px 5px;
    border-radius: 3px;
}

/* config de hint */

.dica {
  position: relative; /* Para que o pseudo-elemento seja posicionado em relação a este span */
  cursor: pointer;
  border-bottom: 1px dashed #555; /* Estilo para indicar que é um elemento com dica */
}

.dica::before {
  content: attr(data-hint); /* Pega o texto do atributo data-hint */
  position: absolute;
  bottom: 100%; /* Posiciona a dica acima do elemento */
  left: 50%;
  transform: translateX(-50%); /* Centraliza a dica */

  /* Estilos da caixa da dica */
  background-color: #333;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  /* white-space: nowrap; /* Impede que o texto quebre a linha */
  max-width: 250px;

  /* Esconde a dica por padrão */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s;
}

.dica:hover::before {
  /* Mostra a dica ao passar o mouse */
  visibility: visible;
  opacity: 1;
}

/* Estilos para o formulário de períodos */
form {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espaço vertical entre os grupos de campos */
    max-width: 600px;
    margin: auto;
}

/* Contêiner para os campos que ficarão lado a lado */
.form-row {
    display: flex;
    justify-content: space-between; /* Distribui os itens uniformemente */
    gap: 15px; /* Espaço horizontal entre os campos */
}

/* Estilos para cada grupo de label + select */
.form-group {
    display: flex;
    flex-direction: column;
    flex: 1; /* Faz os grupos de campos ocuparem o mesmo espaço */
}

.form-group label {
    font-weight: bold;
    margin-bottom: 5px;
}

.form-group select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Estilo para o botão */
.btHora {
    padding: 10px 20px;
    background-color: var(--amarelo-dourado);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* estilos para o quadro de avisos */

.aviso-container {
    max-width: 800px;
    margin: 5px auto;
    display: flex; /* Habilita o Flexbox */
    gap: 10px; /* Espaço entre os elementos flex */
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 8px; /* Bordas arredondadas */
    background-color: #f9f9f9; /* Fundo cinza-claro */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    align-items: flex-start; /* Alinha os itens ao topo */
}

.aviso-data {
    flex: 0 0 auto; /* Não cresce nem encolhe, mantendo seu tamanho original */
    padding-right: 10px; /* Espaço extra para separar da mensagem */
    font-weight: bold;
    color: #333;
    text-align: right;
}

.aviso-data-inicio {
    display: block;
    font-size: 0.9em;
    color: #666;
}

.aviso-data-final {
    display: block;
    font-size: 0.9em;
    color: #666;
    margin-top: 5px;
}

.aviso-mensagem-wrapper {
    flex: 1; /* Ocupa o restante do espaço disponível */
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px; /* Bordas arredondadas */
    background-color: #f1f1f1; /* Fundo do quadro da mensagem */
    word-wrap: break-word; /* Evita quebra de palavras longas */
}

/* estilos das tabs */

/* estilo dos botões de agendamento */
.horario-bloco {
    margin: 5px;
    padding: 8px 15px;
    background-color: #4CAF50; /* Cor de agendamento disponível */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    display: block; /* Para que cada horário ocupe uma linha */
    width: 100%;
    box-sizing: border-box;
    transition: background-color 0.3s;
}
.horario-bloco:hover {
    background-color: #45a049;
}
.container-horarios {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Espaço entre os botões */
}

/*
 * Regras Específicas para a Tabela de Agendamento (dentro da div#horarios-container)
 * O seletor é mais específico e tem prioridade.
 */

#horarios {
    overflow-y: auto;
}

#horarios table {
    width: 100%;
    margin-top: 20px;
    /* Você pode adicionar estilos específicos para a tabela aqui, se necessário */
}

#horarios table th, 
#horarios table td {
    /* 1. Alinhamento de Texto: Centraliza os botões/conteúdo */
    text-align: center;
    
    /* 2. Alinhamento Vertical: OBRIGATÓRIO para alinhar no topo */
    vertical-align: top;
    
    /* 3. Ajuste de padding/borda se necessário para esta tabela */
    padding: 10px;
}

/* Estilos para o div sem form */
.containerForm {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espaço vertical entre os grupos de campos */
    max-width: 600px;
    margin: auto;
}

/* estilos para o div de vulnerabilidades */
.vulnDiv {
  display: none;
  padding:20px;
  background-color: var(--bege-cornsilk);
  border: 1px;
  border-radius: 10px;
}

/* Estilos para imagens no dashboard */
.containerFoto {
    max-width: 800px;
    margin: 50px auto;
    /* Ativa o Flexbox para o container */
    display: flex;
    /* Alinha os itens verticalmente ao centro (imagem e texto) */
    align-items: center;
    /* Coloca um espaço entre a imagem e o texto */
    gap: 10px;
    /* Permite quebra de linha se a tela for pequena */
    flex-wrap: wrap;
}

.header-text {
    /* Permite que a área de texto ocupe o espaço restante */
    flex-grow: 1;
    /* Garante que o texto não tenha espaçamento extra desnecessário */
    margin-block: 0;
}

.user-image {
    /* Garante que a imagem fique sempre no final da primeira linha flex */
    order: 2;
    /* Adiciona margem à esquerda se a ordem for invertida */
    margin-left: auto;
    border-radius: 10px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.8)
}

/* IMPORTANTE: Redefina o fluxo normal para os elementos abaixo da imagem  */
.menuFoto, h3 {
    /* Quebra o fluxo do Flexbox para esses elementos */
    width: 100%;
    /* Garante que o menu comece em uma nova linha */
    order: 3;
}


/* Estilos para cards de estatísticas */

.cards-wrapper {
    display: flex; /* ATIVA o Flexbox */
    gap: 10px; /* Adiciona um espaço entre os cards */
    padding: 10px;

    /* Opcional: Centraliza o grupo de cards na tela */
    justify-content: center;
    align-items: flex-start; /* Alinha o topo dos cards */
    margin-top: 10px;
}
        .card-container {
            /* Define o card como quadrado e adiciona padding */
            width: 160px;
            height: 130px;
            padding: 10px;
            box-sizing: border-box; /* Inclui padding e borda na largura/altura */

            /* Estilo visual */
            background-color: #eeeeee;
            border: 1px solid #ddd;
            border-radius: 15px; /* Bordas arredondadas */
            box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
            text-align: center; /* Centraliza o conteúdo */
            display: flex;
            flex-direction: column; /* Organiza os itens verticalmente */
            justify-content: space-around; /* Distribui o espaço entre os elementos */
        }

        .card-numero {
            /* Estilo para o número em destaque */
            font-size: 3.0rem; /* Fonte grande para o destaque */
            font-weight: bold;
            color: var(--elementos-azuis); /* Cor primária para o número */
            line-height: 1; /* Garante que o número não ocupe muito espaço vertical */
            margin-bottom: 5px; /* Pequena margem abaixo do número */
        }

        .card-texto {
            /* Estilo para o texto */
            font-size: 1rem;
            color: #333;
            /* Garante que o texto quebre linhas automaticamente */
            word-wrap: break-word;
            overflow-wrap: break-word;
            text-align: center;
        }

        .cards-wrapper a, .cards-wrapper a:hover, .cards-wrapper a:visited {
          color: var(--elementos-azuis); /* Cor primária para o número */
          text-decoration: none;
        }


div.legenda {
  display: flex;
  gap: 10px;
  align-items: center;
}

.bannerTopo {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 10px;
    justify-content: space-between;
    margin-bottom: 20px;
    background-color: var(--bege-cornsilk);
}

.bannerTopo h2 {
    margin: 0; /* Remove margem padrão do h2 */
}

.bannerTopo p > a {
    display: inline-block;
    padding: 10px 10px;
    background-color: #ff9024;
    color: white;
    text-decoration: none;
    border-radius: 5px; /* Ajuste o valor para mais ou menos arredondamento */
    border: 1px solid #ed841e;
    font-family: Arial, sans-serif;
    font-size: 14px;
    /* font-weight: bold; */
    transition: background-color 0.3s ease;
}
    
.bannerTopo p > a:hover {
    background-color: #f84316;
}

/* 1. Estilização da Célula (TD) */
/* Usamos a classe para configurar o TD como um contêiner de posicionamento */
.celula-clicavel {
    position: relative; /* CRUCIAL: Define o ponto de referência para o link */
    padding: 0;        /* Remove o padding padrão do TD (opcional) */
    cursor: pointer;   /* Indica visualmente que é clicável */
    /* Adicione quaisquer bordas, cores de texto, etc., para o TD aqui */
}

/* 2. Estilização e Expansão do Link (A) */
/* Selecionamos o link pela classe 'link-expandido' */
.link-expandido {
    display: block;      /* Transforma o link em um bloco para ocupar espaço */
    width: 100%;         /* Expande o link para a largura total do TD */
    height: 100%;        /* Expande o link para a altura total do TD */

    /* Adicione o padding (espaçamento interno) AQUI, no link, e não no TD */
    padding: 10px 15px;

    /* Garante que o padding não faça o link estourar o tamanho do TD */
    box-sizing: border-box;

    /* Estilos do Link */
    text-decoration: none; /* Remove o sublinhado padrão do link */
    color: inherit;        /* Faz o texto do link herdar a cor do TD (ou defina uma cor) */
}

/* 3. Efeito de Hover (Opcional, mas altamente recomendado) */
/* Faz a célula mudar de cor ao passar o mouse, melhorando a UX */
.celula-clicavel:hover {
    background-color: #f0f0f0; /* Um cinza claro para destacar a célula inteira */
}

.resumo {
    padding: 10px;
    background-color: var(--cor-de-sucesso-bg);
}

.pendente {
    color: #FF0000;
}

.paga {
    color: #00FF00;
}

/* estilos para tabela de gestao de mensagens */
.tabela_gestao {
    width: 90%;       /* Define a largura */
    margin: 10px auto; /* Centraliza a tabela horizontalmente */
    border-collapse: collapse; /* Remove espaços entre as bordas */
}

.tabela_gestao th, .tabela_gestao td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}

/* estilo de duas colunas para o formulário de períodos do profissional */
.duas_colunas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px; /* espaço entre os elementos */
}

.item_coluna {
    padding: 10px;
    border: 1px solid #ccc;
}

/* Media Query para dispositivos móveis (telas com no máximo 768px de largura) */
@media (max-width: 768px) {
    body {
        font-size: 16px;
    }

    .site-title h1 {
        font-size: 1em;
    }

    .initial-page h1 {
        color: var(--amarelo-dourado);
        font-size: 1em;
    }
    .initial-page p {
        font-size: 0.9em;
        color: #555;
    }
    .container {
        padding: 15px;
        margin: 20px;
    }

    h2 {
        font-size: 1.5em;
    }

    table {
        font-size: 0.9em;
    }

    .profissionais h2 {
        font-size: 1.2em;
    }

    .horarios table {
        width: 100%;
        margin-top: 5px;
    }

    .container button {
        width: 80%;
        padding: 5px;
        font-size: 12px;
    }

#horarios table th, 
#horarios table td {
    text-align: center;
    vertical-align: top;
    padding: 5px;
    font-size: 12px;
}

    .container .cards-wrapper {
        display: flex; /* ATIVA o Flexbox */
        gap: 10px; /* Adiciona um espaço entre os cards */
        padding: 10px;

        /* Opcional: Centraliza o grupo de cards na tela */
        justify-content: center;
        align-items: flex-start; /* Alinha o topo dos cards */
        margin-top: 10px;
    }

    .card-container {
        /* Define o card como quadrado e adiciona padding */
        width: 80px;
        height: 80px;
        padding: 5px;
        box-sizing: border-box; /* Inclui padding e borda na largura/altura */

        /* Estilo visual */
        background-color: #eeeeee;
        border: 1px solid #ddd;
        border-radius: 15px; /* Bordas arredondadas */
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
        text-align: center; /* Centraliza o conteúdo */
        display: flex;
        flex-direction: column; /* Organiza os itens verticalmente */
        justify-content: space-evenly; /* Distribui o espaço entre os elementos */
    }

    .card-numero {
        /* Estilo para o número em destaque */
        font-size: 1.2rem; /* Fonte grande para o destaque */
        font-weight: bold;
        color: var(--elementos-azuis); /* Cor primária para o número */
        line-height: 1; /* Garante que o número não ocupe muito espaço vertical */
        margin-bottom: 0px; /* Pequena margem abaixo do número */
    }

    .card-texto {
        /* Estilo para o texto */
        font-size: 0.6rem;
        color: #333;
        /* Garante que o texto quebre linhas automaticamente */
        word-wrap: break-word;
        overflow-wrap: break-word;
        text-align: center;
    }

    .cards-wrapper a, .cards-wrapper a:hover, .cards-wrapper a:visited {
      color: var(--elementos-azuis); /* Cor primária para o número */
      text-decoration: none;
    }


    .calendar-table th, .calendar-table td {
        padding: 5px;
        border: 1px solid #eee;
        text-align: center;
        vertical-align: top;
        height: 10px;
        width:14%;
        font-size: 0.7em;
    }

}