/* All my styles are scoped to #calendar-wrapper to avoid conflicts. */
#calendar-wrapper { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: #F0F2F5; padding: 2rem; margin-bottom: 24px; }
#calendar-wrapper .calendar-container { width: 100%; margin: auto; border-radius: 8px;}
#calendar-wrapper .calendar-header { display: flex; align-items: center; margin-bottom: 1rem; flex-wrap: wrap;}
#calendar-wrapper #month-year-display { font-size: 1.5rem; font-weight: 700; color: #1C2E6C; margin: 0; width: 44%;}
#calendar-wrapper .controls { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; width: 56%; justify-content: space-between;}
#calendar-wrapper .nav-buttons, #calendar-wrapper .filter-buttons { display: flex; background-color: #F0F2F5; border-radius: 6px; padding: 4px; gap: 8px;}
#calendar-wrapper .nav-buttons button, #calendar-wrapper .filter-buttons button { background-color: #ffffff; border: 1px solid #B7C6EC; padding: 0 10px; font-size: 0.875rem; font-weight: 700; border-radius: 7px; cursor: pointer; color: #1C2E6C; transition: background-color 0.2s ease, color 0.2s ease; height: 40px;}
#calendar-wrapper .filter-buttons button.active, #calendar-wrapper .nav-buttons button:hover, #calendar-wrapper .filter-buttons button:hover { background-color: #B7C6EC; color: #1C2E6C; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
#calendar-wrapper #add-event-btn { background-color: #2D4A7D; color: #FFFFFF; font-weight: 600; font-size: 0.875rem; padding: 0.6rem 1.2rem; border-radius: 6px; border: none; cursor: pointer; }
/* CHANGE: Styles for the new button in the modal. */
#calendar-wrapper #add-event-btn-modal { background-color: #2D4A7D; color: #FFFFFF; font-weight: 600; font-size: 0.875rem; padding: 0.6rem 1.2rem; border-radius: 6px; border: none; cursor: pointer; width: auto; }
#calendar-wrapper .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); border-top: 1px solid #DCDFE3; border-radius: 15px; overflow: hidden; background: #F9FAFE; border: 1px solid #B7C6EC;}
#calendar-wrapper .day-name { text-align: left; font-weight: 600; color: #000000; font-size: 0.875rem; background-color: #ffffff; border-bottom: 1px solid #B7C6EC; padding: 8px; text-align: center; border-left: 1px solid #B7C6EC;}
#calendar-wrapper .day-cell { position: relative; background-color: #F9FAFE; border-bottom: 1px solid #DCDFE3; border-left: 1px solid #DCDFE3; display: flex; flex-direction: column; min-height: 150px; padding: 8px; }
#calendar-wrapper .day-cell:nth-child(7n+1) { border-left: none; }
#calendar-wrapper .day-number { font-size: 0.8rem; font-weight: 500; margin:0 auto; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
#calendar-wrapper .day-cell.other-month .day-number { color: #B0B0B0; }
#calendar-wrapper .day-number.today { background-color: #D93025; color: #FFFFFF; border-radius: 50%; font-weight: 700; }
#calendar-wrapper .events-wrapper { flex-grow: 1; overflow: hidden; }
#calendar-wrapper .event-card { border-radius: 4px; margin-top: 4px; font-size: 0.75rem; display: flex; gap: 4px; padding: 6px; }
#calendar-wrapper .event-card-content { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
#calendar-wrapper .event-organizer { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.7rem; }
#calendar-wrapper .organizer-prefix { color: #65676B; }
#calendar-wrapper .organizer-name { color: #2E6AB3; font-weight: bold; }
#calendar-wrapper .acue-logo-sm { height: 10px; vertical-align: middle; margin-left: 4px; }
#calendar-wrapper .event-footer { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 8px; }
#calendar-wrapper .event-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.8rem; color: #050505; }
#calendar-wrapper .event-time { font-size: 0.8rem; font-weight: 600; color: #050505; flex-shrink: 0; padding-left: 4px; }
#calendar-wrapper .event-icon-wrapper { flex-shrink: 0; display: flex; align-items: flex-start; padding-top: 2px; position: absolute; top: 4px; right: 10px;}
#calendar-wrapper .cloud-icon { width: 20px; height: 20px; stroke: #8A98A9; stroke-width: 1.5; }
#calendar-wrapper .event-card.event-pbsc { background-color: #E7F3FF; }
#calendar-wrapper .event-card.event-pbsc .event-title, #calendar-wrapper .event-card.event-pbsc .event-time { color: #1A5276; }
#calendar-wrapper .event-card.event-acue { background-color: #FFEBEB; }
#calendar-wrapper .event-card.event-acue .event-title, #calendar-wrapper .event-card.event-acue .event-time, #calendar-wrapper .event-card.event-acue .organizer-name { color: #9B2335; }
#calendar-wrapper .more-events { font-size: 0.8rem; font-weight: 600; color: #2E6AB3; margin-top: 6px; display: inline-block; text-decoration: none; cursor: pointer; }
#calendar-wrapper .more-events:hover { text-decoration: underline; }
#calendar-wrapper .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); display: none; justify-content: center; align-items: center; z-index: 1000; }
#calendar-wrapper .modal-content { background-color: #FFFFFF; padding: 0; border-radius: 12px; width: 90%; max-width: 800px; animation: modal-fade-in 0.3s ease-out; padding: 15px;}
@keyframes modal-fade-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
#calendar-wrapper .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 0; }
#calendar-wrapper .modal-header h3 { margin: 0; font-size: 25px; font-weight: 700; margin-bottom: 20px;}
#calendar-wrapper .close-btn { background: none; border: none; font-size: 2rem; color: #65676B; cursor: pointer; line-height: 1; }
#calendar-wrapper .modal-body { padding: 0; display: flex; flex-direction: column; gap: 1rem; max-height: 60vh; overflow-y: auto; margin: 0;}
#calendar-wrapper .modal-event-item { padding: 5px 10px; border-radius: 8px; position: relative; }
#calendar-wrapper .modal-event-item.event-pbsc { background-color: #E7F3FF; }
#calendar-wrapper .modal-event-item.event-acue { background-color: #FFEBEB; }
#calendar-wrapper .modal-event-organizer { font-size: 0.8rem; display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
#calendar-wrapper .acue-logo-lg { height: 18px; width: auto; }
#calendar-wrapper .modal-event-title { font-size: 1.1rem; font-weight: 600; margin: 0; }
#calendar-wrapper .modal-event-time { position: absolute; right: 10px; bottom: 2px; font-weight: 600; font-size: 0.9rem; }
#calendar-wrapper .modal-event-item .cloud-icon { width: 20px; height: 20px; position:absolute; }
#calendar-wrapper .modal-footer { padding: 1rem 1.5rem; border-top: 1px solid #EAEBEE; text-align: right; }
/* AÑADIDO: Estilos para que los nuevos enlaces de los títulos no rompan el diseño. */
#calendar-wrapper .event-title-link,
#calendar-wrapper .modal-event-link {
    text-decoration: none;
    color: inherit;
}
#calendar-wrapper .event-title-link:hover,
#calendar-wrapper .modal-event-link:hover .modal-event-title {
    text-decoration: underline;
}