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

    body {
        font-family: 'Poppins', sans-serif;
    }

    /* ===== HEADER ===== */
    #header {
        width: 100%;
        height: 50px;
        position: fixed;
        top: 0;
        left: 0;
        background: linear-gradient(to right, #C0392B, #114455);
        display: flex;
        align-items: center;
        z-index: 10;
    }

    #title {
        color: white;
        padding-left: 20px;
        font-size: 28px;
    }

    /* ===== BARRA ESQUERDA ===== */
    #barraesquerda {
        position: fixed;
        top: 50px;
        left: 0;
        width: 320px;
        height: calc(100vh - 50px);
        background: #C0392B;
        padding: 15px;
        color: white;
        display: flex;
        flex-direction: column;
        font-family: 'Inter', sans-serif;
    }

    /* ===== MINI CALENDÁRIO ===== */
    #calendario {
        margin-top: 10px;
    }

    .calendariotop {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    #mes {
        font-size: 18px;
        font-weight: 600;
    }

    #calendarseta {
        display: flex;
        gap: 15px; /* espaço entre as setas */
    }

    #calendarseta button {
        background: transparent;
        border: none;
        color: white;
        font-size: 26px; /* tamanho maior */
        cursor: pointer;
        padding: 5px 10px; /* aumenta área de clique */
        transition: transform 0.2s ease;
    }

    #calendarseta button:hover {
        transform: scale(1.2); /* efeito ao passar o mouse */
    }
    .setas-grande {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .titulo-mes {
        font-size: 16px;
        font-weight: 500;
    }

    .dia-semana {
        background: #f0f0f0;
        text-align: center;
        font-weight: 600;
        font-size: 12px;
        padding: 10px 0;
        border: 1px solid #ddd;
    }
    .antGrande,
    .proxGrande {
        background: transparent;
        border: none;
        color: #1f3b57;
        font-size: 26px;
        cursor: pointer;
        padding: 5px 10px;
        transition: transform 0.2s ease;
    }

    .antGrande:hover,
    .proxGrande:hover {
        transform: scale(1.2);
    }

    .calendariodia {
        width: 100%;
        border-collapse: collapse;
    }

    .calendariodia th {
        font-size: 11px;
        opacity: 0.7;
    }

    .calendariodia td {
        text-align: center;
        padding: 6px;
        font-size: 12px;
        border-radius: 50%;
        position: relative;
    }

    /* bolinha */
    .calendariodia td::after {
        content: "";
        width: 5px;
        height: 5px;
        background: white;
        border-radius: 50%;
        position: absolute;
        bottom: -2px;
        left: 50%;
        transform: translateX(-50%);
    }

    .outromes {
        opacity: 0.4;
    }

    .calendariodia td.today {
        background: #114455;
        border-radius: 30%;
        height: 0px;
        width: 5px;

    }




    /* ===== AGENDA ===== */
    .agenda-header {
        margin-top: 15px;
        border-top: 1px solid rgba(255,255,255,0.3);
        border-bottom: 1px solid rgba(255,255,255,0.3);
        padding: 8px 0;
        font-size: 13px;
    }

    .evento {
        margin-top: 10px;
        padding-left: 10px;
        border-left: 3px solid white;
    }

    .evento.azul {
        border-color: #00c2ff;
    }

    .evento.rosa {
        border-color: #ff4fa3;
    }

    .hora {
        font-size: 11px;
        opacity: 0.7;
    }

    .titulo {
        font-size: 13px;
    }

    .link {
        font-size: 11px;
        color: #ffdede;
    }

    /* ===== FERIADOS ===== */
    .feriados-header {
        margin-top: 15px;
        font-weight: 600;
    }

    .feriado {
        display: flex;
        gap: 8px;
        margin-top: 8px;
        font-size: 13px;
    }

    .dot {
        width: 6px;
        height: 6px;
        background: #d4ff6a;
        border-radius: 50%;
    }

    /* ===== MAIN ===== */
    .main {
        margin-left: 320px;
        margin-top: 50px;
        min-height: calc(100vh - 50px);
        display: flex;
        flex-direction: column;
        background: #f5f5f5;
    }

    /* ===== TOPBAR ===== */
    .topbar {
        height: 70px;
        background: #eaeaea;
        border-bottom: 3px solid #c0392b;

        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 0 25px;
    }

    .topbar h1 {
        font-size: 24px;
        color: #1f3b57;
    }

    /* USER AREA */
    .user-area {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .icone {
        font-size: 20px;
        cursor: pointer;
    }

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

    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: url('https://i.pravatar.cc/100') center/cover;
    }

    .info {
        display: flex;
        flex-direction: column;
    }

    .nome {
        font-weight: 600;
        color: #1f3b57;
    }

    .cargo {
        font-size: 12px;
        color: #666;
    }

    /* ===== SUBHEADER ===== */
    .subheader {
        background: #eaeaea;
        border-bottom: 3px solid #c0392b;
        padding: 10px 20px;

        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .subheader h2 {
        color: #1f3b57;
    }

    /* BOTÕES */
    .view-buttons button {
        border: none;
        padding: 5px 10px;
        border-radius: 6px;
        cursor: pointer;
        background: transparent;
    }

    .view-buttons .active {
        background: #c0392b;
        color: white;
    }

    /* ===== MÊS ===== */
    .month-title {
        padding: 10px 20px;
        font-size: 16px;
    }

    /* ===== CALENDÁRIO GRANDE ===== */
    .calendar-area {
    display: grid;
    grid-template-columns: repeat(7, 1fr);

    /* PRIMEIRA LINHA MENOR */
    grid-template-rows: 40px repeat(6, 120px);
}

/* DIAS DA SEMANA */
.dia-semana {
    background: #f0f0f0;
    text-align: center;
    font-weight: 600;
    font-size: 13px;
    padding: 10px 0;
    border: 1px solid #ddd;
}

    .dia-box {
        background: #fff;
        border: 1px solid #ddd;
    }

    .dia-box:hover {
        background: #eaeaff;
    }
    .icone-img {
        width: 20px;
        height: 20px;
        cursor: pointer;
        object-fit: contain;
        transition: transform 0.2s ease;
    }

    .icone-img:hover {
        transform: scale(1.15);
    }
    .calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 10px 20px;
    background: #eee;
    border-bottom: 1px solid #ccc;
}

/* ESQUERDA (MÊS + SETAS) */
.mes-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.titulo-mes {
    font-size: 18px;
    font-weight: 600;
    color: #1f3b57;
}

.seta {
    background: transparent;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #c0392b;
}

/* DIREITA (DIA / SEMANA / MÊS) */
.view-switch {
    display: flex;
    gap: 10px;
}

.view-switch button {
    border: none;
    padding: 6px 14px;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    font-weight: 500;
    color: #1f3b57;
}

/* BOTÃO ATIVO (MÊS) */
.view-switch .active {
    background: #c0392b;
    color: white;
}