.calendario {
    /* width: 356px; Removido para responsividade */
    /* height: 336px; Removido para responsividade */
    max-width: 100%; /* Garante que não exceda o container */
    opacity: 1;
    border-radius: 14px;
    border: 1px solid #E0E0E0; /* Borda mais visível para o card */
    background: #FEFEFE;
    padding: 10px;
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto 1fr; /* Cabeçalho e corpo do calendário */
    gap: 5px; /* Espaçamento entre as seções */
    font-family: Arial, sans-serif;
    color: #333;
}

.calendario-header {
    display: grid;
    grid-template-columns: auto 1fr auto auto; /* Botão anterior, mês, botão próximo, ano */
    align-items: center;
    text-align: center;
    padding: 0px 8px 5px 8px; /* Adicionado padding lateral */
    /* border-bottom: 1px solid #eee; Removido */
}

.calendario-header .nav-mes {
    text-decoration: none;
    color: #1B7727; /* Nova cor */
    width: 16px; /* Nova largura */
    height: 16px; /* Nova altura */
    display: flex; /* Para centralizar o conteúdo se for um ícone */
    justify-content: center;
    align-items: center;
    /* top: 4px; e left: 4px; - Propriedades de posicionamento, não aplicadas diretamente aqui */
}

.calendario-header .nav-mes.prev-mes {
    transform: rotate(-180deg); /* Rotaciona a seta anterior */
}

.calendario-header .mes-atual {
    font-family: 'Kanit', sans-serif; /* Nova fonte */
    font-weight: 500; /* Medium */
    font-size: 24px;
    line-height: 100%;
    color: #26323F; /* Nova cor */
}

.calendario-header .selecao-ano-wrapper.cegovbr-agenda-custom-dropdown {
    position: relative;
    display: inline-block; /* Changed to inline-block to allow width to be set by content or child */
    margin-left: auto; /* Alinha o wrapper à direita */
    /* Removed fixed width and height */
    /* Removed overflow: hidden; */
}

.calendario-header .cegovbr-agenda-custom-dropdown-selected {
    width: 75px; /* As requested */
    height: 32px; /* Adjusted height to fit padding and font-size */
    padding: 7px 10px; /* As requested */
    border-radius: 8px; /* As requested */
    border: 1px solid #1B7727; /* As requested */
    background: transparent; /* As requested */
    font-family: 'Kanit', sans-serif; /* As requested */
    font-weight: 400; /* As requested */
    font-size: 14px; /* As requested */
    line-height: 100%; /* As requested */
    letter-spacing: 0; /* As requested */
    color: #1B7727; /* As requested */
    opacity: 1; /* As requested */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.calendario-header .cegovbr-agenda-custom-dropdown-selected .dropdown-arrow {
    font-size: 20px; /* Size of the arrow icon */
    color: #1B7727; /* Color of the arrow icon */
}

.calendario-header .cegovbr-agenda-custom-dropdown-options {
    position: absolute;
    top: 100%; /* Position below the selected value */
    left: 0;
    right: 0;
    background: #FEFEFE; /* As requested for options background */
    border: 1px solid #C5C5C5; /* As requested for options border */
    border-radius: 8px; /* As requested for options border-radius */
    z-index: 100; /* Ensure it appears above other content */
    max-height: 170px; /* Max height for scrollability, as requested height for select */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Optional: add a subtle shadow */
    margin-top: 4px; /* Small gap between selected and options list */
}

.calendario-header .cegovbr-agenda-custom-dropdown-option {
    padding: 11px 20px; /* As requested for options padding */
    margin-top: 3px;
    margin-bottom: 3px;
    font-family: 'Kanit', sans-serif; /* As requested */
    font-weight: 500; /* As requested */
    font-size: 16px; /* As requested */
    line-height: 100%; /* As requested */
    letter-spacing: 0; /* As requested */
    color: #465564; /* As requested */
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.calendario-header .cegovbr-agenda-custom-dropdown-option:hover {
    /* background-color: #f0f0f0; Light background on hover */
}

.calendario-header .cegovbr-agenda-custom-dropdown-option.cegovbr-agenda-selected {
   /* background-color: #e0e0e0; /* Highlight selected option */
    /*font-weight: 700;  Make selected option bolder */
}

.calendario .semana {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    background: #1B7727; /* Novo background */
    border-top: 1px solid #C5C5C5; /* Borda superior */
    border-left: 1px solid #C5C5C5; /* Borda esquerda */
    border-radius: 10px 10px 0px 0px; /* Novo border-radius para o container */
}

.calendario .semana li {
    padding: 5px 0;
    font-family: 'Kanit', sans-serif; /* Nova fonte */
    font-weight: 300; /* Light */
    font-size: 16px;
    line-height: 132%;
    color: #FEFEFE; /* Nova cor do texto */
    /* Adicionar borda direita e inferior para cada item da lista */
    border-right: 1px solid #C5C5C5;
    /* border-bottom: 1px solid #C5C5C5; Removido */
}

.calendario .semana li:first-child {
    border-top-left-radius: 10px; /* Aplica o border-radius superior esquerdo */
}

.calendario .semana li:last-child {
    border-top-right-radius: 9px; /* Aplica o border-radius superior direito */
}

.calendario .dias-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /* gap: 1px; Removido */
    text-align: center;
    /* border-left: 1px solid #C5C5C5; Removido para evitar borda dupla */
    border-right: 1px solid #C5C5C5;
    border-bottom: 1px solid #C5C5C5;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.calendario .dias-grid a,
.calendario .dias-grid .dia-vazio {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Preenche a largura da coluna */
    aspect-ratio: 1 / 1; /* Mantém a proporção quadrada */
    text-decoration: none;
    font-family: 'Kanit', sans-serif; /* Nova fonte */
    font-weight: 300; /* Light */
    font-size: 16px;
    line-height: 132%;
    color: #465564; /* Nova cor do texto */
    border-top: 1px solid #C5C5C5; /* Borda superior */
    border-left: 1px solid #C5C5C5; /* Borda esquerda */
    border-radius: 0; /* Removido border-radius para bordas retas */
    transition: background-color 0.2s;
    box-sizing: border-box; /* Garante que padding e border sejam incluídos na largura/altura */
    min-width: 0; /* Permite que o item encolha */
    position: relative; /* Necessário para posicionar o círculo interno */
    text-align: center; /* Centraliza o texto */
    /* background-color: transparent; Removido */
}

/* Estilo para os domingos do mês atual */
.calendario .dias-grid a:nth-child(7n+1):not(.dia-outro-mes) {
    background: #E3E3E3;
    color: #929292;
}

/* Arredonda a primeira célula da última linha do grid */
.calendario .dias-grid > *:nth-last-child(-n + 7):nth-child(7n + 1) {
    border-bottom-left-radius: 10px;
}

/* Arredonda a última célula da última linha do grid */
.calendario .dias-grid > *:nth-last-child(-n + 7):nth-child(7n) {
    border-bottom-right-radius: 10px;
}

/* Estilos base para os círculos internos */
.calendario .dias-grid .dia-hoje-circle,
.calendario .dias-grid .dia-selecionado-circle {
    width: 36px;
    height: 36px;
    border-radius: 18px; /* Para fazer um círculo */
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Kanit', sans-serif;
    font-weight: 300; /* Light */
    font-size: 16px;
    line-height: 132%;
    position: absolute; /* Posiciona o círculo */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centraliza o círculo */
}

/* Estilos para o <a> principal do dia (quando é o dia atual e/ou selecionado) */
.calendario .dias-grid a.hoje,
.calendario .dias-grid a.dia-selecionado {
    background-color: transparent; /* Fundo transparente */
    /* border: none; Removido */
    color: transparent; /* Oculta o número do dia no <a> principal */
    font-weight: normal; /* Resetar o font-weight do <a> */
}

/* 1. Dia de Hoje (quando selecionado) */
/* Seletor: a.hoje.dia-selecionado > .dia-selecionado-circle */
.calendario .dias-grid a.hoje.dia-selecionado .dia-selecionado-circle {
    background: #1B7727; /* Verde */
    border: 1px solid #26A737; /* Borda verde mais clara */
    color: #FEFEFE; /* Texto branco */
}

/* 2. Dia de Hoje (quando outro dia estiver selecionado - ou seja, o dia de hoje não está selecionado) */
/* Seletor: a.hoje:not(.dia-selecionado) > .dia-hoje-circle */
.calendario .dias-grid a.hoje:not(.dia-selecionado) .dia-hoje-circle {
    background: #465564; /* Cinza */
    border: 1px solid #C5C5C5; /* Borda cinza claro */
    color: #FEFEFE; /* Texto branco */
}

/* 3. Dia Selecionado (quando não é o dia de hoje) */
/* Seletor: a.dia-selecionado:not(.hoje) > .dia-selecionado-circle */
.calendario .dias-grid a.dia-selecionado:not(.hoje) .dia-selecionado-circle {
    background: transparent; /* Sem background */
    border: 1px solid #26A737; /* Borda verde mais clara */
    color: #26A737; /* Cor do texto verde mais clara */
}

/* Com compromisso (Default) → fundo branco + tipografia preta. */
.calendario .dias-grid a.tem-agenda:not(.dia-selecionado):not(.hoje) {
    background-color: transparent; /* Fundo transparente */
    color: #465564;
}

/* Sem compromisso → fundo cinza + tipografia cinza clara. */
.calendario .dias-grid a.sem-agenda {
    background-color: transparent; /* Fundo transparente */
    color: #465564; /* Cor do texto para dias normais */
    cursor: default; /* Indica que não é clicável para navegação */
}

/* Dias fora do mês e dias vazios - com estilos de layout dos dias normais, mas cor e cursor específicos */
.calendario .dias-grid .dia-vazio,
.calendario .dias-grid .dia-outro-mes {
    color: #929292; /* Cor do texto para dias de outros meses */
    cursor: default; /* Indica que não é clicável */
    background-color: transparent; /* Fundo transparente */
    display: flex; /* Garante que as propriedades de alinhamento funcionem */
    align-items: center; /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
    border-top: 1px solid #C5C5C5; /* Borda superior */
    border-left: 1px solid #C5C5C5; /* Borda esquerda */
}

.calendario-body {
    display: grid;
    grid-template-rows: auto 1fr; /* Dias da semana e dias do mês */
}

/* Estilos para o layout de grid do shortcode */
.cegovbr-agenda-grid-container {
    display: grid;
    grid-template-columns: 1fr; /* Padrão para mobile: uma coluna */
    gap: 20px; /* Espaçamento entre as colunas */
    margin-top: 20px; /* Espaçamento superior */
    max-width: 1010px; /* Aumentado para acomodar a largura da agenda */
    width: 100%; /* Garante que o grid ocupe o espaço do container pai */
    margin-left: auto; /* Centraliza o container */
    margin-right: auto; /* Centraliza o container */
    padding: 0px; /* Removido padding lateral */
}

@media (min-width: 768px) { /* Exemplo de breakpoint para tablets e desktops */
    .cegovbr-agenda-grid-container {
        grid-template-columns: 356px auto; /* Coluna do calendário fixa, agenda automática */
        gap: 54px; /* Distância de 54px entre o calendário e os compromissos */
        align-items: start; /* Alinha os itens ao topo */
    }
}

.cegovbr-agenda-col-calendario {
    /* Estilos específicos para a coluna do calendário, se necessário */
}

.cegovbr-agenda-col-horarios {
    /* Estilos específicos para a coluna dos horários, se necessário */
}

.calendario-mes-nav {
    width: 170px;
    height: 36px;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between; /* Espaça os botões e o mês */
    margin-left: 8px; /* Nova margem esquerda */
    /* opacity: 1; - Valor padrão, não precisa ser explícito */
    /* angle: 0 deg; - Valor padrão, não precisa ser explícito */
}

/* Estilos para o tooltip customizado */
.cegovbr-agenda-custom-tooltip {
    max-width: 250px; /* Define uma largura máxima para o tooltip */
    height: 46px;
    padding: 16px 13px;
    border-radius: 8px;
    background: #FEFEFE;
    border: 1px solid #C5C5C5;
    position: absolute; /* Posicionamento via JavaScript */
    display: none; /* Oculto por padrão */
    z-index: 9999; /* Acima de outros elementos */
    box-sizing: border-box;
    text-align: center; /* Centraliza o texto */
    white-space: nowrap; /* Impede a quebra de linha */
    font-family: 'Kanit', sans-serif;
    font-weight: 300; /* Light */
    font-size: 14px;
    line-height: 100%;
    color: #757575;
}

/* Estilos para o card da agenda */
.agenda-horarios.agenda-card {
    background: #FEFEFE;
    border: 1px solid #C5C5C5;
    padding: 24px;
    border-radius: 16px;
    width: 634px; /* Largura fixa conforme solicitado */
    height: auto; /* Altura se adapta ao conteúdo */
    box-sizing: border-box; /* Garante que o padding não afete a largura total */
}

@media (max-width: 767px) {
    .agenda-horarios.agenda-card {
        width: 414px;
    }
    .agenda-card-final {
        width: 100%; /* Garante que o card ocupe o espaço disponível */
        max-width: 382px; /* Define a largura máxima para mobile */
    }
}

/* Estilos para o novo card final */
.agenda-card-final {
    width: 100%; /* Garante que o card ocupe o espaço disponível */
    max-width: 586px; /* Define a largura máxima para desktop */
    height: 56px;
    display: flex; /* Para usar o gap e alinhar itens */
    align-items: center;
    justify-content: center; /* Centraliza o conteúdo horizontalmente */
    gap: 8px;
    border-radius: 8px;
    border: 1px solid #C5C5C5;
    padding: 16px;
    background: #F9F9F9;
    box-sizing: border-box; /* Garante que padding e border sejam incluídos na largura/altura */
    margin-top: 24px; /* Espaçamento do card anterior */
}

.agenda-card-final .material-symbols-outlined {
    font-size: 18px; /* Tamanho do ícone */
    color: #465564; /* Cor do ícone, se não especificado */
}

.agenda-card-final .agenda-card-final-text {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 132%;
    color: #465564;
    text-align: center; /* Centraliza o texto */
}

/* Estilos para os itens individuais dentro do card */
.agenda-horarios.agenda-card .Card.Informativo.BgBranco.row {
    display: none;
}

.agenda-horarios.agenda-card h2 b.-light {
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 100%;
    color: #465564;
}

.agenda-horarios.agenda-card h2 {
    display: flex;
    align-items: center;
}

.hoje-tag {
    width: 56px;
    height: 31.5px;
    padding: 2.25px 9px;
    border-radius: 9px;
    border: 2.25px solid #1B7727;
    margin-right: 16px; /* Changed from margin-left to margin-right */

    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 100%;
    color: #1B7727;
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* New Event Card Styles */
.agenda-evento-card {
    display: flex;
    align-items: stretch;
    margin-bottom: 24px;
    min-height: 78px;
    position: relative;
    width: 100%;
}

.agenda-evento-hora {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Align text to the left */
    padding-left: 16px; /* 16px distance from the left border */
    flex-shrink: 0; /* Prevent shrinking */
    width: 125px;
    background: linear-gradient(90deg, #EEEEEE 0%, #D9F2EF 100%);
    border: 1px solid #C5C5C5;
    border-radius: 16px;
    z-index: 1; /* Sits behind the details card */
}

.compromissos-passados .agenda-evento-card .agenda-evento-hora {
    background: #FEFEFE;
}

.compromisso-atual .agenda-evento-card .agenda-evento-hora {
    background: #1B7727;
    border: 1px solid #1B7727;
}

.compromisso-atual .agenda-evento-card .agenda-evento-hora span {
    color: #FEFEFE;
}

.compromisso-atual .agenda-evento-card .agenda-evento-detalhes {
    border: 1px solid #1B7727;
}

.agenda-evento-hora span {
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 100%;
    color: #465564;
}

.agenda-evento-detalhes {
    background: #FEFEFE;
    border: 1px solid #C5C5C5;
    border-radius: 16px;
    padding: 16px;
    flex: 1; /* Grow to fill available space */
    margin-left: -34px; /* The overlap amount */
    display: flex;
    flex-direction: column;
    z-index: 2; /* Sits on top of the time card */
}

.agenda-evento-detalhes .evento-titulo {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 132%;
    color: #465564;
    margin: 0;
    padding: 0;
}

.agenda-evento-detalhes .evento-local {
    display: flex;
    align-items: center;
    gap: 4px; /* Changed from 8px to 4px */
    margin-top: 8px;
}

.agenda-evento-detalhes .evento-local span {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 100%;
    color: #465564;
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

.agenda-evento-detalhes .evento-local .material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-size: 13.5px; /* Adjust icon size */
}

.agenda-dia {
    display: flex;
    flex-direction: column;
}

.agenda-section-title {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 132%;
    color: #929292;
    margin-bottom: 16px;
    margin-top: 16px; /* Add some space above the title */
}

.categoria-horario:first-child .agenda-section-title {
    margin-top: 0; /* Remove margin for the very first title */
}

/* /* /* .categoria-horario.compromissos-futuros .agenda-evento-card {
    background: linear-gradient(90deg, #EEEEEE 0%, #D9F2EF 100%);
    border: 1px solid #C5C5C5;
} */ */ */