/* Estilos gerais do corpo da página */
body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #dbe2f2; /* Azul claro suave para o fundo geral */
    color: #2d3748; /* Cor de texto padrão (cinza escuro) */
    box-sizing: border-box;
}

/* Container principal para centralizar o conteúdo */
.container {
    width: 100%;
    padding: 0px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Layout do conteúdo principal */
.main-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Estilo do cabeçalho */
header {
    text-align: center;
    background-color: #2d3748; /* Cor de fundo escura para o header */
    color: white; /* Texto branco */
    padding: 9px 0;
}

header h1 {
    margin: 0;
    font-size: 2rem;
}

/* Tabela de Calendário - Estilos base */
.calendar-table {
    width: 100%;
    border-collapse: collapse; /* Para que as bordas se unam */
    margin-top: 18px;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave para destacar a tabela */
    border-radius: 8px; /* Cantos arredondados */
    overflow: hidden; /* Garante que os cantos arredondados funcionem com as bordas */
}

/* Cabeçalhos da tabela */
.calendar-table th {
    padding: 12px 10px; /* Mais padding vertical */
    text-align: center;
    border: 1px solid #c4d0da; /* Borda um pouco mais visível */
    background-color: #cbd5e0; /* Cinza claro suave para os cabeçalhos */
    color: #2d3748; /* Cor de texto */
    font-weight: bold;
    /* text-transform: uppercase;  Deixa o texto em maiúsculas */
}

/* Células da tabela (padrão) */
.calendar-table td {
    padding: 10px;
    text-align: center;
    border: 1px solid #e2e8f0; /* Borda suave cinza claro para todas as células */
    background-color: #f9fafb; /* Cor de fundo bem suave para as células padrão */
    color: #4a5568; /* Cor de texto mais suave para dias */
}

/* Estilos específicos para a coluna KW */
.calendar-table .KW {
    background-color: #e6edf7; /* Azul muito suave para KW */
    font-weight: bold;
    color: #2d3748;
}

/* Estilos para Sábado e Domingo */
.calendar-table .sa {
    background-color: #d1e8ff; /* Azul suave para Sábado */
    color: #2d3748; /* Texto escuro */
}

.calendar-table .so {
    background-color: #cbd5e0; /* Cinza claro para Domingo */
    color: #2d3748; /* Texto escuro */
}

/* Estilos para feriados */
.calendar-table td.holiday {
    background-color: #c4e7f4; /* Azul lavanda suave para feriados */
    color: #2d3748; /* Texto escuro */
    font-weight: bold; /* Destaca mais os feriados */
}

/* Estilo compartilhado para o fundo principal do dia/semana atual */
.highlight-current {
    background-color: #a0c4ff; /* Um azul pastel para o destaque geral da semana/dia */
    border: 2px solid #4f9dfd; /* Borda geral para destaque */
    /* Removido o color e font-weight daqui para serem controlados pelo .today */
}

/* Estilo para o dia atual - AGORA MAIS ESCURO E COM TEXTO BRANCO E SUBLINHADO */
.calendar-table td.today {
    background-color: #2c5282; /* Azul bem escuro para o dia atual */
    color: white; /* Cor do número branco */
    font-weight: bold; /* Já estava, mas bom manter */
    text-decoration: underline; /* Sublinha o número do dia */
    border: 2px solid #001f3f; /* Borda mais escura para combinar */
    position: relative; 
    z-index: 2; /* Garante que o dia atual fique acima de tudo */
}

/* Estilo para a semana atual (a linha inteira) */
.calendar-table tr.highlight-current {
    background-color: #e0f2f7; /* Um azul/verde muito claro para a semana atual, para diferenciar do dia */
    border-left: 3px solid #64b5f6; /* Borda azul suave à esquerda */
    border-right: 3px solid #64b5f6; /* Borda azul suave à direita */
    /* As células individuais (td) dentro desta linha terão seus próprios backgrounds */
}

/* Ajustes para a célula KW na semana atual, para não ser afetada pela cor do dia */
.calendar-table tr.highlight-current .KW {
    background-color: #d7edf4; /* Um azul mais claro para o KW da semana atual */
    border-color: #64b5f6; /* Borda do KW na semana atual */
}


/* Estilo para Turno Leandro */
.calendar-table .Leandro {
    background-color: #e0e7ff; /* Azul muito claro e neutro para Leandro */
    color: #2d3748; /* Texto escuro */
    font-weight: 500; 
}

/* Estilo para Turno Rafaela */
.calendar-table .Rafaela {
    background-color: #d1e2f7; /* Azul claro para Rafaela */
    color: #2d3748; /* Texto escuro */
    font-weight: 500;
}

/* Estilo para células que o JavaScript marca como vazias */
.calendar-table td.empty-day { 
    color: transparent; /* Torna o texto "" invisível */
    cursor: default;
}

/* Efeito de hover suave nas células */
.calendar-table td:hover {
    background-color: #dae4ef; /* Cinza/azul suave para hover */
    cursor: pointer;
}

/* Para garantir que células vazias não mudem de cor no hover, se estiverem vazias */
.calendar-table td.empty-day:hover {
    background-color: inherit; /* Herda a cor do elemento pai (td), que pode ser SA/SO */
    cursor: default;
}

/* Legenda do calendário */
.legend {
    margin-top: 10px;
    padding: 5px;
    background-color: #f1f4f8;
    border-left: 5px solid #2d3748; 
    border-radius: 4px; 
    line-height: 1.6; 
}

.legend-item strong {
    color: #2d3748; 
    margin-bottom: 5px;
    display: block; 
}

/* Pequenos marcadores de cor na legenda */
.legend-item span.sa::before { content: ''; display: inline-block; width: 15px; height: 15px; background-color: #d1e8ff; border: 1px solid #a0c4ff; vertical-align: middle; margin-right: 5px; }
.legend-item span.so::before { content: ''; display: inline-block; width: 15px; height: 15px; background-color: #cbd5e0; border: 1px solid #8e9ba9; vertical-align: middle; margin-right: 5px; }
.legend-item span.holiday::before { content: ''; display: inline-block; width: 15px; height: 15px; background-color: #c4e7f4; border: 1px solid #99c0d3; vertical-align: middle; margin-right: 5px; }

/* Marcador da legenda para o dia atual (mais escuro, texto branco) */
.legend-item span.today::before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: #2c5282; /* Cor de fundo do dia atual */
    border: 1px solid #001f3f; /* Borda do dia atual */
    vertical-align: middle;
    margin-right: 5px;
}
/* Removido o item da legenda para highlight-current se for só para semana */
.legend-item span.current-week::before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: #e0f2f7; /* Cor da semana atual */
    border: 1px solid #64b5f6; /* Borda da semana atual */
    vertical-align: middle;
    margin-right: 5px;
}


.legend-item span.empty-day::before { content: ''; display: inline-block; width: 15px; height: 15px; background-color: #f9fafb; border: 1px solid #e2e8f0; vertical-align: middle; margin-right: 5px; } /* Cor da célula padrão */


/* Ajuste da tabela em telas pequenas */
@media (max-width: 768px) {
    .calendar-table th, .calendar-table td {
        padding: 8px;
        font-size: 0.9em;
    }
}

.turnos-iframe {
    width: 100%;
    
    /* Propriedades para remover espaços extras e garantir comportamento de bloco */
    margin: 0 !important; /* Remove qualquer margem externa indesejada */
    padding: 0 !important; /* Remove qualquer padding interno indesejado */
    display: block; /* Ajuda a eliminar pequenos espaços que elementos inline-block podem ter */
    
    border: 1px solid #e2e8f0; /* Mantém sua borda existente */
    background-color: #f7fafc; /* Mantém sua cor de fundo existente */

    /* Se você não quiser NENHUMA borda, pode adicionar: */
    border: none !important;
}

/* Responsividade para o iframe (se você tiver outras regras aqui, mantenha-as) */
@media (max-width: 768px) { /* Para telas de até 768px de largura */
    .container {
        width: 99%; /* IMPORTANTE: Mude para 100% para remover o 5% de cada lado */
        padding: 0; /* Remove completamente o padding em cima/baixo e laterais */
        /* Se você quiser um respiro mínimo, mas menor que 20px, use: */
        padding: 0 0px; /* 0px em cima/baixo, 10px nas laterais */
    }
}