#calendar-header {
            width: 100%;
            margin: 20px 0 0;
            padding: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: white;
            border: 1px solid #ccc;
            border-bottom: none;
            box-sizing: border-box;
        }

        #calendar-header h2 {
            margin: 0;
            font-size: 1.5em;
            color: #333;
        }

        .nav-button {
            background-color: #06276B;
            color: white;
            border: none;
            padding: 8px 15px;
            text-decoration: none;
            cursor: pointer;
            border-radius: 4px;
            font-weight: bold;
            transition: background-color 0.2s;
        }

        .nav-button:hover:not(.disabled) {
            background-color: #07348F;
        }
        
        .nav-button.disabled {
            background-color: #ccc;
            cursor: default;
            color: #666;
        }

        #calendar-container {
            width: 100%;
            margin: 0;
            border: 1px solid #ccc;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            background-color: white;
            box-sizing: border-box; 
            overflow-x: auto; 
        }

        .calendar {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed; 
            min-width: 700px; 
        }

        .calendar thead th {
            background-color: #e9e9e9;
            padding: 10px 5px;
            text-align: center;
            font-size: 1.1em;
            font-weight: bold;
            color: #333;
            border: 1px solid #ccc;
            border-top: none;
            border-left: none;
            white-space: nowrap;
        }
        .calendar thead th:last-child {
            border-right: none;
        }

        .day-cell {
            border: 1px solid #ccc;
            vertical-align: top;
            min-height: 100px; 
            padding: 0; 
            position: relative;
        }
        .day-cell:last-child {
            border-right: none;
        }

        .empty-day {
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            border-bottom: none;
        }

        .day-top {
            height: 25px;
            padding: 5px 8px 0;
            font-size: 0.9em;
            font-weight: bold;
            text-align: right;
            border-bottom: 1px solid #ccc;
            display: flex;
            justify-content: flex-end;
        }

        .day-num {
            display: inline-block;
            padding: 2px 4px;
            color: #fff;
        }

        .green-bg {
            background-color: #028100;
        }

        .red-bg {
            background-color: #EA0B04;

        }

        .event-list {
            padding: 5px;
            overflow-y: auto; 
            max-height: 95px; /* Adjusted height */
            scrollbar-width: thin; 
        }

        /* WebKit specific styles for slim scrollbar */
        .event-list::-webkit-scrollbar {
            width: 5px; /* Width of the scrollbar itself */
            height: 5px;
        }

        .event-list::-webkit-scrollbar-thumb {
            background-color: #a8a8a8; /* Color of the handle */
            border-radius: 10px;
        }

        .event-list::-webkit-scrollbar-track {
            background: #f1f1f1; /* Color of the track */
        }        

        .event {
            color: #222222;
            font-size: 0.65em; 
            padding: 4px 6px;
            margin-bottom: 4px;
            border-radius: 3px;
            line-height: 1.3;
            
            /* --- KEY CHANGES FOR TWO LINES --- */
            overflow: hidden;
            max-height: 2.6em; /* Allows up to two lines */
            white-space: normal; /* Allow wrapping */
            text-overflow: clip; 
            /* ---------------------------------- */

            text-align: left;
        }

        /* Specific Event Colors */
        .purple {
            background-color: #E0E0E0; /* Misa Comunitaria */
        }

        .blue {
            background-color: #DDDDDD; /* Evento Privado (EP) */
        }
        
        .orange {
            background-color: #D8D8D8; /* Misa Especial (ME) */
        }












@media (max-width: 650px) {

    .calendar {
        display: block !important;
        border: none !important;
        border-collapse: collapse !important;
        border-spacing: 0 !important;
    }

    .empty-day {
        display: none !important;
        border: none !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #calendar-header {
        border: 1px solid #ccc !important;
        border-bottom: 2px solid #ccc !important; /* One clear thick line */
        margin-bottom: 15px; /* Space before the first card starts */
    }
    


    /* 2. Completely kill the header and any row that contains only hidden cells */
    .calendar thead, 
    .calendar thead tr, 
    .calendar thead th {
        display: none !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }





    #calendar-container {
        border: none;
        box-shadow: none;
        overflow-x: hidden; /* Stop the horizontal scroll */
        width: 100%;
    }

    .calendar {
        display: block;
        width: 100% !important;
        min-width: 0 !important; /* Forces the 700px to die */
        table-layout: auto;      /* Resets the fixed layout */
        border: none;
    }

    /* 2. Hide headers and empty cells */
    .calendar thead {
        display: none; /* Hide Mon, Tue, Wed... */
    }

    .empty-day {
        display: none !important; /* Remove grey blocks with no dates */
    }

    /* 3. Turn table rows and cells into a vertical stack */
    .calendar tbody, 
    .calendar tr, 
    .calendar td.day-cell {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }

    .calendar tr {
        margin-bottom: 0; /* Rows are just wrappers now */
    }

    /* 4. Style the Day Card */
    .day-cell {
        margin-bottom: 15px; /* Space between days */
        border: 1px solid #ccc !important;
        border-radius: 8px;
        overflow: hidden;
        background: #fff;
    }

    /* 5. Fix the Green/Red Header Bar */
    .day-top {
        height: auto !important;
        padding: 8px 12px !important;
        display: flex !important;
        justify-content: space-between !important; /* Puts "Día" and "Number" on opposite sides */
        align-items: center;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }

    .day-num {
        font-size: 1.1em;
    }

    /* Add a label so we know it's a date */
    .day-num::before {
        content: "Fecha: ";
        font-weight: normal;
        font-size: 0.9em;
        margin-right: 5px;
    }

    /* 6. Fix Event List and Text */
    .event-list {
        max-height: none !important; /* Let it grow to show all events */
        padding: 10px !important;
    }

    .event {
        font-size: 0.85em !important; /* Slightly larger for mobile fingers */
        line-height: 1.4;
        padding: 10px !important;
        margin-bottom: 8px;
        max-height: none !important; /* Don't cut off text */
        white-space: normal !important; /* Allow wrapping */
        word-wrap: break-word;
        border-radius: 4px;
        border-left: 5px solid #999; /* Visual indicator */
    }

    .event.purple { border-left-color: #8e44ad; background: #f3f0f5; }
    .event.blue { border-left-color: #2980b9; background: #eef5f9; }

    /* 7. Adjust Header Buttons */
    #calendar-header {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px;
        justify-content: center;
    }
    
    #calendar-header h2 {
        width: 100%;
        text-align: center;
        order: -1; /* Move title to top */
        font-size: 1.2em;
        margin-bottom: 5px;
    }
    
    .nav-button {
        flex: 1;
        text-align: center;
        padding: 10px;
    }
}