<style>
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&family=Playfair+Display:wght@700&display=swap');

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        font-family: 'Montserrat', sans-serif;
        background-color: #f5f7fa;
        min-height: 50vh;
        display: flex;
        flex-direction: column;
        overflow-x: hidden; /* Evita barra de rolagem horizontal */
    }

    /* Container principal - ocupa 100% da largura */
    .calendar-container {
        width: 100%;
        margin: 0;
        background: white;
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
    }

    /* Cabeçalho do calendário */
    .month-header {
        background: linear-gradient(135deg, #6e8efb, #a777e3);
        color: white;
        padding: 2px;
        text-align: center;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .month-title {
        font-family: 'Playfair Display', serif;
        font-size: 1.2rem;
        font-weight: 300;
        margin: 0;
    }

    /* Dias da semana - largura fixa em % */
    .weekdays {
        display: flex; /* Mudado para flex para controle preciso */
        width: 100%;
    }

    .weekday {
        width: 14.2857%; /* 100% / 7 colunas */
        padding: 2px 0;
        text-align: center;
        font-weight: 600;
        color: #4a5568;
        background-color: #e0e5f0;
        flex-shrink: 0; /* Impede que a coluna diminua */
    }

    /* Grade de dias - largura fixa em % */
    .days-grid {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    /* Célula do dia - largura fixa em % */
    .day-cell {
        width: 14.2857%; /* 100% / 7 colunas */
        border: 1px solid #e2e8f0;
        padding: 2px;
        min-height: 20px; /* Altura fixa mínima */
        display: flex;
        flex-direction: column;
        overflow: hidden; /* Impede que conteúdo extra vaze */
        flex-shrink: 0; /* Impede que a célula diminua */
    }

    .day-number {
        font-size: 1.1rem;
        font-weight: 300;
        margin-bottom: 2px;
        align-self: flex-end;
    }

    /* Estilo para dias de outros meses */
    .other-month {
        background-color: #f8fafc;
        color: #cbd5e0;
    }

    /* Estilo para o dia atual */
    .today {
        background-color: #ebf8ff;
    }

    .today .day-number {
        background-color: #4299e1;
        color: white;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Estilo para fins de semana */
    .weekend {
        background-color: #f9fafb;
    }

    /* Estilo para eventos */
    .event-title {
        border-radius: 4px;
        color: #fff;
        padding: 2px 2px;
        margin: 2px 0;
        font-size: 0.8rem;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
        border: none;
        width: 100%;
    }

    /* Tabela de resumo */
    .summary-table {
        width: 100%;
        margin: 2px 0;
        background: white;
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
        border-collapse: collapse;
    }

    .summary-table th {
        width: 14.2857%; /* 100% / 7 colunas */
        background: linear-gradient(135deg, #6e8efb, #a777e3);
        color: white;
        padding: 2px;
        text-align: center;
    }

    .summary-table td {
        width: 14.2857%; /* 100% / 7 colunas */
        padding: 2px;
        vertical-align: top;
        border: 1px solid #e2e8f0;
    }

    .summary-table ul {
        list-style-type: none;
        padding-left: 0;
        margin-bottom: 0;
    }

    .summary-table li {
        padding: 2px 0;
        font-size: 0.9rem;
    }

    /* Responsividade */
    @media (max-width: 768px) {
        .month-title {
            font-size: 1.8rem;
        }

        .day-cell {
            min-height: 20px;
            padding: 2px;
        }

        .day-number {
            font-size: 0.9rem;
        }

        .event-title {
            font-size: 0.7rem;
        }

        .summary-table th,
        .summary-table td {
            padding: 2px 2px;
        }

        .summary-table li {
            font-size: 0.8rem;
        }
    }

    @media (max-width: 480px) {
        .month-title {
            font-size: 1.5rem;
        }

        .weekday {
            font-size: 0.8rem;
            padding: 2px 0;
        }

        .day-cell {
            min-height: 20px;
        }

        .event-title {
            padding: 1px 2px;
            font-size: 0.6rem;
        }

        .summary-table th,
        .summary-table td {
            padding: 2px 2px;
            font-size: 0.8rem;
        }

        .summary-table li {
            font-size: 0.7rem;
        }
    }
</style>
