Calendario de Eventos - Colegio Farmac\u00e9utico<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --cef-color-primary: #6e2c91;\n --cef-color-secondary: #ed154e;\n --cef-color-background: #ffffff;\n --cef-color-gray-bg: #f5f5f5;\n --cef-color-text: #1a1a1a;\n --cef-color-text-light: #666666;\n --cef-color-border: #e0e0e0;\n --cef-shadow: 0 2px 8px rgba(0,0,0,0.08);\n --cef-shadow-hover: 0 4px 16px rgba(0,0,0,0.12);\n --cef-transition: all 0.3s ease;\n --cef-radius: 4px;\n \/* Colores para estados *\/\n --cef-status-abierto-bg: #d4edda;\n --cef-status-abierto-text: #155724;\n --cef-status-preparacion-bg: #fff3cd;\n --cef-status-preparacion-text: #856404;\n --cef-status-cancelado-bg: #f8d7da;\n --cef-status-cancelado-text: #721c24;\n --cef-status-cerrado-bg: #e2e3e5;\n --cef-status-cerrado-text: #383d41;\n }\n \n .cef-calendar-wrapper * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \n .cef-calendar-wrapper {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n background-color: var(--cef-color-gray-bg);\n color: var(--cef-color-text);\n line-height: 1.6;\n font-size: 16.5px; \n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n \n .cef-container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 20px;\n }\n \n .cef-page-header {\n background-color: var(--cef-color-primary);\n color: white;\n \/*padding: 1.85rem 0; *\/\n text-align: center;\n margin-bottom: 2.75rem; \n }\n \n .cef-page-header .cef-main-title { \n font-family: 'Oswald', 'Arial', sans-serif; \n text-transform: uppercase;\n font-size: clamp(2.1rem, 4.8vw, 3rem); \n font-weight: 600; \n letter-spacing: 0.05em;\n margin: 0;\n color: white;\n }\n \n .cef-search-container {\n display: flex;\n justify-content: center;\n margin-bottom: 2.75rem; \n padding: 0 1rem;\n }\n \n .cef-search-box {\n width: 100%;\n max-width: 580px; \n padding: 0.9rem 1.4rem; \n font-size: 1.3rem; \n font-family: 'Inter', sans-serif;\n border: 1px solid var(--cef-color-border);\n border-radius: var(--cef-radius);\n transition: var(--cef-transition);\n outline: none;\n background-color: white;\n }\n \n .cef-search-box:focus {\n border-color: var(--cef-color-primary);\n box-shadow: 0 0 0 3px rgba(110, 44, 145, 0.2); \n }\n \n .cef-view-selector {\n display: flex;\n justify-content: center;\n margin-bottom: 3.2rem; \n gap: 0;\n }\n \n .cef-view-button {\n padding: 0.8rem 1.85rem; \n background-color: var(--cef-color-gray-bg);\n border: 1px solid var(--cef-color-border);\n cursor: pointer;\n font-size: 1.2rem; \n font-weight: 500;\n font-family: 'Inter', sans-serif;\n transition: var(--cef-transition);\n color: var(--cef-color-text);\n display: flex;\n align-items: center;\n gap: 0.65rem; \n }\n \n .cef-view-button:first-child {\n border-radius: var(--cef-radius) 0 0 var(--cef-radius);\n border-right: none;\n }\n \n .cef-view-button:last-child {\n border-radius: 0 var(--cef-radius) var(--cef-radius) 0;\n }\n \n .cef-view-button.active {\n background-color: var(--cef-color-primary);\n color: white;\n border-color: var(--cef-color-primary);\n position: relative;\n z-index: 1;\n }\n \n .cef-view-button:hover:not(.active):not(.cef-view-button-disabled) {\n background-color: #dcdcdc; \n }\n .cef-view-button.cef-view-button-disabled {\n opacity: 0.5;\n cursor: not-allowed;\n background-color: #e9ecef;\n color: #6c757d;\n }\n \n .cef-view-button svg {\n width: 21px; \n height: 21px;\n stroke: currentColor;\n }\n \n .cef-list-view {\n display: none;\n animation: cef-fadeIn 0.5s ease;\n }\n \n .cef-events-grid {\n display: grid;\n gap: 2.2rem; \n grid-template-columns: repeat(auto-fill, minmax(370px, 1fr)); \n }\n \n .cef-event-card {\n background: white;\n border-radius: var(--cef-radius);\n overflow: hidden;\n box-shadow: var(--cef-shadow);\n transition: var(--cef-transition);\n cursor: pointer;\n display: flex; \n flex-direction: row;\n }\n .cef-event-card.status-cancelado {\n opacity: 0.7;\n background-color: #fcfcfc;\n }\n .cef-event-card.status-cancelado .cef-card-title {\n text-decoration: line-through;\n }\n \n .cef-event-card:hover:not(.status-cancelado) {\n transform: translateY(-4px); \n box-shadow: var(--cef-shadow-hover);\n }\n \n .cef-event-card-marker {\n width: 6px;\n background-color: var(--cef-color-secondary); \n flex-shrink: 0;\n }\n .cef-event-card.status-abierto .cef-event-card-marker { background-color: var(--cef-status-abierto-text); }\n .cef-event-card.status-preparacion .cef-event-card-marker { background-color: var(--cef-status-preparacion-text); }\n .cef-event-card.status-cancelado .cef-event-card-marker { background-color: var(--cef-status-cancelado-text); }\n .cef-event-card.status-cerrado .cef-event-card-marker { background-color: var(--cef-status-cerrado-text); }\n\n\n .cef-event-card-main-content { \n flex-grow: 1;\n }\n \n .cef-event-card-header {\n background-color: var(--cef-color-primary);\n color: white;\n padding: 1.2rem 1.5rem; \n }\n \n .cef-event-card-header .cef-card-title { \n font-family: 'Oswald', 'Arial', sans-serif; \n font-size: 1.85rem; \n font-weight: 500;\n margin: 0;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n line-height: 1.35; \n color: white;\n }\n \n .cef-event-card-body {\n padding: 1.5rem; \n display: flex;\n flex-direction: column;\n gap: 1rem; \n }\n \n .cef-event-meta {\n display: flex;\n flex-direction: column;\n gap: 1.1rem; \n color: var(--cef-color-text-light);\n font-size: 1.1rem; \n }\n \n .cef-event-meta-item {\n display: flex;\n align-items: center;\n gap: 0.7rem; \n }\n \/* Estilo espec\u00edfico para los iconos SVG en tarjetas y modales *\/\n .cef-event-meta-item svg, \n .cef-modal-meta-item svg {\n width: 18px; \n height: 18px;\n fill: none; \/* Asegurar que no haya relleno *\/\n stroke: var(--cef-color-primary); \/* Usar color primario para el trazo *\/\n stroke-width: 2; \/* Ajustar grosor del trazo si es necesario *\/\n flex-shrink: 0;\n }\n .cef-event-online-indicator {\n font-weight: 500;\n color: var(--cef-color-primary);\n }\n .cef-event-credits {\n font-size: 0.85rem;\n color: var(--cef-color-text-light);\n }\n\n .cef-event-status-badge {\n display: inline-block;\n padding: 0.25em 0.6em;\n font-size: 0.8rem;\n font-weight: 500;\n border-radius: var(--cef-radius);\n text-transform: uppercase;\n margin-top: 5px;\n align-self: flex-start;\n }\n .cef-event-status-badge.status-abierto { background-color: var(--cef-status-abierto-bg); color: var(--cef-status-abierto-text); }\n .cef-event-status-badge.status-preparacion { background-color: var(--cef-status-preparacion-bg); color: var(--cef-status-preparacion-text); }\n .cef-event-status-badge.status-cancelado { background-color: var(--cef-status-cancelado-bg); color: var(--cef-status-cancelado-text); }\n .cef-event-status-badge.status-cerrado { background-color: var(--cef-status-cerrado-bg); color: var(--cef-status-cerrado-text); }\n\n \n .cef-event-description {\n color: var(--cef-color-text);\n line-height: 1.65; \n font-size: 1rem; \n\t\t\tmargin: 10px 0 15px!important;\n }\n \n .cef-event-category {\n align-self: flex-start;\n display: inline-block;\n background-color: var(--cef-color-secondary);\n color: white;\n padding: 0.35rem 0.9rem; \n border-radius: var(--cef-radius);\n font-size: 0.85rem; \n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n margin-top: 8px;\n }\n \n .cef-calendar-view {\n display: none;\n animation: cef-fadeIn 0.5s ease;\n }\n \n .cef-calendar-container {\n background: white;\n border-radius: var(--cef-radius);\n padding: 2.3rem; \n box-shadow: var(--cef-shadow);\n }\n \n .cef-calendar-header {\n text-align: center;\n margin-bottom: 2.3rem; \n }\n \n .cef-calendar-header .cef-calendar-title { \n font-family: 'Oswald', 'Arial', sans-serif; \n font-size: 2.7rem; \n font-weight: 500;\n color: var(--cef-color-primary);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n margin-bottom: 1.3rem; \n }\n \n .cef-calendar-nav {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 1.3rem; \n }\n \n .cef-calendar-nav button {\n background-color: var(--cef-color-primary);\n color: white;\n border: none;\n padding: 0.65rem 1.5rem; \n border-radius: var(--cef-radius);\n cursor: pointer;\n font-size: 1.3rem; \n font-weight: 500;\n transition: var(--cef-transition);\n display: flex;\n align-items: center;\n gap: 0.65rem; \n }\n \n .cef-calendar-nav button:hover {\n background-color: #5a2478;\n }\n .cef-calendar-nav button svg {\n width: 18px; \n height: 18px;\n stroke: currentColor;\n }\n\n .cef-calendar-grid {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n gap: 1px;\n background-color: var(--cef-color-border);\n border: 1px solid var(--cef-color-border);\n border-radius: var(--cef-radius);\n overflow: hidden;\n }\n \n .cef-calendar-day-header {\n font-weight: 600;\n text-align: right;\n color: var(--cef-color-primary);\n padding: 1.15rem 0.5rem; \n text-transform: uppercase;\n font-size: 1.4rem; \n letter-spacing: 0.05em;\n background-color: var(--cef-color-gray-bg);\n }\n \n .cef-calendar-day {\n aspect-ratio: 1;\n padding: 0.65rem; \n position: relative;\n background: white;\n transition: var(--cef-transition);\n cursor: pointer;\n display: flex;\n flex-direction: column;\n gap: 0.35rem; \n min-height: 95px; \n }\n \n .cef-calendar-day:hover:not(.cef-other-month) {\n background-color: #f8f4fc;\n }\n\n .cef-calendar-day.cef-weekend-day {\n background-color: #f9f9f9; \n }\n .cef-calendar-day.cef-weekend-day:hover:not(.cef-other-month) {\n background-color: #f1f1f1; \n }\n \n .cef-calendar-day-number {\n font-weight: 500;\n color: var(--cef-color-text);\n font-size: 1.95rem; \n text-align: right;\n width: 100%;\n }\n\n .cef-calendar-day.cef-current-day .cef-calendar-day-number {\n background-color: var(--cef-color-secondary);\n color: white;\n border-radius: 20%;\n width: 1.9em; \n height: 1.9em;\n line-height: 2.1em;\n text-align: center;\n font-weight: 600;\n margin-left: auto;\n margin-right: 0;\n font-size: 1.9rem; \n }\n \n .cef-calendar-day-event {\n background-color: var(--cef-color-primary);\n color: white;\n padding: 0.25rem 0.5rem; \n border-radius: 3px; \n font-size: 1.1rem; \n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n cursor: pointer;\n transition: var(--cef-transition);\n font-weight: 500;\n }\n .cef-calendar-day-event.status-cancelado {\n background-color: var(--cef-status-cancelado-text);\n text-decoration: line-through;\n }\n \n .cef-calendar-day-event:hover {\n background-color: #5a2478;\n }\n \n .cef-calendar-day.cef-other-month {\n opacity: 0.6; \n background-color: #fdfdfd;\n cursor: default;\n }\n .cef-calendar-day.cef-other-month .cef-calendar-day-number {\n color: var(--cef-color-text-light);\n }\n \n .cef-modal {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.8);\n z-index: 10000;\n animation: cef-fadeIn 0.3s ease;\n padding: 1rem;\n overflow-y: auto;\n }\n \n .cef-modal-content {\n position: relative;\n background-color: white;\n margin: 2rem auto;\n width: 100%;\n max-width: 680px; \n border-radius: var(--cef-radius);\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n animation: cef-slideIn 0.3s ease;\n overflow: hidden;\n }\n \n .cef-modal-header {\n background-color: var(--cef-color-primary);\n color: white;\n padding: 1.85rem 2.3rem; \n position: relative;\n }\n \n .cef-modal-header .cef-modal-title { \n font-family: 'Oswald', 'Arial', sans-serif; \n font-size: 1.8rem; \n font-weight: 500;\n margin: 0;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n padding-right: 2.8rem; \n color: white;\n }\n \n .cef-modal-close {\n position: absolute;\n top: 50%;\n right: 1.85rem; \n transform: translateY(-50%);\n background: none;\n color: white;\n border: none;\n width: 38px; \n height: 38px;\n cursor: pointer;\n font-size: 1.85rem; \n font-weight: 300;\n transition: var(--cef-transition);\n display: flex;\n align-items: center;\n justify-content: center;\n line-height: 1;\n opacity: 0.8;\n }\n \n .cef-modal-close:hover {\n opacity: 1;\n transform: translateY(-50%) scale(1.1);\n }\n \n .cef-modal-body {\n padding: 2.3rem; \n }\n \n .cef-modal-meta {\n display: flex;\n flex-direction: column;\n gap: 1rem; \n margin-bottom: 1.5rem; \n color: var(--cef-color-text-light);\n }\n \n .cef-modal-meta-item {\n display: flex;\n align-items: center;\n gap: 0.7rem; \n font-size: 1.25rem; \n }\n .cef-modal-meta-item strong { color: var(--cef-color-text); }\n .cef-modal-meta-item a {\n color: var(--cef-color-primary);\n text-decoration: none;\n font-weight: 500;\n }\n .cef-modal-meta-item a:hover {\n text-decoration: underline;\n color: var(--cef-color-secondary);\n }\n \n .cef-modal-description {\n line-height: 1.7; \n color: var(--cef-color-text);\n font-size: 1.4rem; \n margin-top: 1.5rem;\n }\n \n @keyframes cef-fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n \n @keyframes cef-slideIn {\n from { transform: translateY(-30px); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n }\n \n @media (max-width: 992px) { \n .cef-calendar-day-header { font-size: 0.75rem; padding: 0.8rem 0.3rem; }\n .cef-calendar-day { padding: 0.5rem; min-height: 80px; }\n .cef-calendar-day-number { font-size: 0.85rem; }\n .cef-calendar-day.cef-current-day .cef-calendar-day-number { width: 1.9em; height: 1.9em; line-height: 1.9em; font-size: 0.8rem; }\n .cef-calendar-day-event { font-size: 0.75rem; padding: 0.2rem 0.4rem; }\n }\n\n @media (max-width: 768px) {\n .cef-page-header { padding: 1.5rem 1rem; border-radius: 0; }\n .cef-page-header .cef-main-title { font-size: clamp(1.9rem, 4.2vw, 2.4rem); } \n .cef-search-container, .cef-view-selector { padding: 0 1rem; }\n .cef-search-box { padding: 0.8rem 1.2rem; font-size: 0.95rem; }\n .cef-view-button { padding: 0.7rem 1.4rem; font-size: 0.9rem; }\n .cef-view-button svg { width: 18px; height: 18px; }\n .cef-events-grid { grid-template-columns: 1fr; gap: 1.4rem; padding: 0 1rem; }\n .cef-event-card-header { padding: 1.3rem 1.5rem; }\n .cef-event-card-header .cef-card-title { font-size: 1.3rem; }\n .cef-event-card-body { padding: 1.5rem; }\n .cef-event-meta { font-size: 0.9rem; }\n .cef-event-description { font-size: 1rem; }\n .cef-event-category { font-size: 0.8rem; }\n\n .cef-calendar-container { margin: 0 1rem; padding: 1.3rem; }\n .cef-calendar-header .cef-calendar-title { font-size: 1.7rem; }\n .cef-calendar-nav button { padding: 0.6rem 1.2rem; font-size: 0.85rem; }\n .cef-calendar-nav button svg { width: 16px; height: 16px; }\n \n .cef-calendar-day-header { font-size: 0.65rem; padding: 0.7rem 0.2rem; } \n .cef-calendar-day { padding: 0.25rem; min-height: 65px; } \n .cef-calendar-day.cef-current-day .cef-calendar-day-number { width: 1.8em; height: 1.8em; line-height: 1.8em; font-size: 0.75rem; }\n .cef-calendar-day-number { font-size: 0.75rem; }\n .cef-calendar-day-event { font-size: 0.65rem; padding: 0.15rem 0.3rem; } \n \n .cef-modal-content { margin: 1rem; }\n .cef-modal-header { padding: 1.5rem 1.7rem; }\n .cef-modal-header .cef-modal-title { font-size: 1.5rem; }\n .cef-modal-body { padding: 1.7rem; }\n .cef-modal-meta-item { font-size: 0.95rem; }\n .cef-modal-description { font-size: 1.05rem; }\n }\n \n @media (max-width: 640px) { \n .cef-page-header .cef-main-title { font-size: 1.7rem; }\n .cef-view-button { padding: 0.6rem 1rem; font-size: 0.85rem; }\n .cef-event-card-header .cef-card-title { font-size: 1.2rem; }\n .cef-event-description { font-size: 0.9rem; }\n }\n\n @media (max-width: 480px) { \n .cef-page-header .cef-main-title { font-size: 1.6rem; }\n .cef-view-button { padding: 0.5rem 0.8rem; font-size: 0.8rem; }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"cef-calendar-wrapper\">\n <div class=\"cef-container\">\n <div class=\"cef-page-header\">\n <div class=\"cef-main-title\">Calendario de Eventos<\/div> \n <\/div>\n \n <div class=\"cef-search-container\">\n <input type=\"text\" class=\"cef-search-box\" id=\"searchBox\" placeholder=\"Buscar eventos...\">\n <\/div>\n \n <div class=\"cef-view-selector\">\n <button class=\"cef-view-button active\" id=\"cefBtnList\" onclick=\"switchView('list')\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <line x1=\"8\" y1=\"6\" x2=\"21\" y2=\"6\"><\/line><line x1=\"8\" y1=\"12\" x2=\"21\" y2=\"12\"><\/line><line x1=\"8\" y1=\"18\" x2=\"21\" y2=\"18\"><\/line><line x1=\"3\" y1=\"6\" x2=\"3.01\" y2=\"6\"><\/line><line x1=\"3\" y1=\"12\" x2=\"3.01\" y2=\"12\"><\/line><line x1=\"3\" y1=\"18\" x2=\"3.01\" y2=\"18\"><\/line>\n <\/svg>\n Lista\n <\/button>\n <button class=\"cef-view-button\" id=\"cefBtnCalendar\" onclick=\"switchView('calendar')\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"><\/rect><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"><\/line><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"><\/line><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"><\/line>\n <\/svg>\n Mes\n <\/button>\n <\/div>\n \n <div id=\"listView\" class=\"cef-list-view\" style=\"display: block;\">\n <div class=\"cef-events-grid\" id=\"eventsGrid\">\n <\/div>\n <\/div>\n \n <div id=\"calendarView\" class=\"cef-calendar-view\">\n <div class=\"cef-calendar-container\">\n <div class=\"cef-calendar-header\">\n <div class=\"cef-calendar-title\" id=\"currentMonth\"><\/div> \n <div class=\"cef-calendar-nav\">\n <button onclick=\"changeMonth(-1)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"15 18 9 12 15 6\"><\/polyline>\n <\/svg>\n Anterior\n <\/button>\n <button onclick=\"changeMonth(1)\">\n Siguiente\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"9 18 15 12 9 6\"><\/polyline>\n <\/svg>\n <\/button>\n <\/div>\n <\/div>\n <div class=\"cef-calendar-grid\" id=\"calendarGrid\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div id=\"eventModal\" class=\"cef-modal\">\n <div class=\"cef-modal-content\">\n <div class=\"cef-modal-header\">\n <div class=\"cef-modal-title\" id=\"modalTitle\"><\/div> \n <button class=\"cef-modal-close\" onclick=\"closeModal()\">\u00d7<\/button>\n <\/div>\n <div class=\"cef-modal-body\">\n <div class=\"cef-modal-meta\">\n <\/div>\n <div class=\"cef-modal-description\" id=\"modalDescription\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n \n<script>\n const mockEvents = [\n {\n id: 1,\n title: \"Jornada Informativa: Nueva Ley del Medicamento\",\n date: \"2025-07-10\",\n endDate: null,\n time: \"17:00 - 19:00\",\n location: \"Sal\u00f3n de Actos Colegial\",\n category: \"Jornada\",\n status: \"Abierto\", \/\/ Abierto, En preparaci\u00f3n, Cancelado, Cerrado\n isOnline: false,\n credits: 0,\n summary: \"An\u00e1lisis y debate sobre las implicaciones de la nueva legislaci\u00f3n farmac\u00e9utica. Ponentes expertos resolver\u00e1n dudas.\",\n description: \"Sesi\u00f3n informativa crucial para todos los colegiados sobre la reci\u00e9n aprobada Ley del Medicamento. Se detallar\u00e1n los cambios m\u00e1s significativos que afectan a la dispensaci\u00f3n, la farmacovigilancia y la gesti\u00f3n de la oficina de farmacia. Contaremos con la presencia de juristas especializados y representantes de la administraci\u00f3n sanitaria. Se abrir\u00e1 un turno de preguntas para resolver todas las dudas. Imprescindible inscripci\u00f3n previa debido aforo limitado.\",\n registrationLink: \"#\",\n moreInfoLink: null,\n publicationDate: \"2025-06-15\"\n },\n {\n id: 2,\n title: \"Curso Online: Gesti\u00f3n Avanzada de Redes Sociales para Farmacias\",\n date: \"2025-07-15\",\n endDate: \"2025-07-29\", \/\/ Evento de varios d\u00edas\n time: \"Acceso 24h\", \/\/ O un horario espec\u00edfico si es s\u00edncrono\n location: \"Plataforma Online del Colegio\",\n category: \"Curso\",\n status: \"Abierto\",\n isOnline: true,\n credits: 5,\n summary: \"Aprende a potenciar la visibilidad de tu farmacia y a interactuar con tus pacientes a trav\u00e9s de estrategias efectivas en redes sociales.\",\n description: \"Curso eminentemente pr\u00e1ctico de 20 horas de duraci\u00f3n, distribuido en 4 m\u00f3dulos. Aprender\u00e1s a crear contenido de valor, gestionar campa\u00f1as publicitarias, analizar m\u00e9tricas y cumplir con la normativa de publicidad sanitaria en el entorno digital. Incluye plantillas, casos de \u00e9xito y tutor\u00edas personalizadas. Plazas limitadas.\",\n registrationLink: \"#\",\n moreInfoLink: \"#\",\n publicationDate: \"2025-06-20\"\n },\n {\n id: 3,\n title: \"Taller Pr\u00e1ctico de Dermofarmacia: Peelings Qu\u00edmicos\",\n date: \"2025-08-05\",\n endDate: null,\n time: \"16:00 - 20:00\",\n location: \"Aula de Formaci\u00f3n Pr\u00e1ctica (Sede Colegial)\",\n category: \"Taller\",\n status: \"En preparaci\u00f3n\",\n isOnline: false,\n credits: 2.5,\n summary: \"Formaci\u00f3n intensiva sobre los diferentes tipos de peelings qu\u00edmicos, indicaciones, protocolos de aplicaci\u00f3n y cuidados post-tratamiento.\",\n description: \"Este taller pr\u00e1ctico est\u00e1 dirigido a farmac\u00e9uticos con inter\u00e9s en ampliar sus conocimientos y habilidades en dermofarmacia avanzada. Se realizar\u00e1 una demostraci\u00f3n pr\u00e1ctica y los asistentes podr\u00e1n resolver sus dudas con expertos en la materia. Material incluido. Grupo reducido para garantizar la calidad de la formaci\u00f3n.\",\n registrationLink: null, \/\/ A\u00fan no abierto\n moreInfoLink: \"#\",\n publicationDate: \"2025-07-01\"\n },\n {\n id: 4,\n title: \"Conferencia Anual: Innovaci\u00f3n en Atenci\u00f3n Primaria\",\n date: \"2025-09-12\",\n endDate: \"2025-09-13\",\n time: \"D\u00eda completo\",\n location: \"Palacio de Congresos Ciudad Real\",\n category: \"Conferencia\",\n status: \"Abierto\",\n isOnline: false,\n credits: 8,\n summary: \"Evento de referencia nacional con ponencias magistrales, mesas redondas y presentaci\u00f3n de comunicaciones sobre el futuro de la atenci\u00f3n primaria.\",\n description: \"La Conferencia Anual reunir\u00e1 a profesionales de todas las disciplinas de la Atenci\u00f3n Primaria para debatir sobre los retos y oportunidades del sector. Temas clave: cronicidad, telefarmacia, humanizaci\u00f3n de la asistencia y colaboraci\u00f3n interprofesional. Env\u00edo de abstracts abierto hasta el 15 de Julio.\",\n registrationLink: \"#\",\n moreInfoLink: \"#\",\n publicationDate: \"2025-05-10\"\n },\n {\n id: 5,\n title: \"Campa\u00f1a de Salud Bucodental Infantil (Cancelada)\",\n date: \"2025-07-20\",\n endDate: null,\n time: \"10:00 - 14:00\",\n location: \"Varias farmacias adheridas\",\n category: \"Campa\u00f1a\",\n status: \"Cancelado\",\n isOnline: false,\n credits: 0,\n summary: \"Actividad de concienciaci\u00f3n y revisi\u00f3n bucodental para ni\u00f1os de 6 a 12 a\u00f1os.\",\n description: \"Esta campa\u00f1a ten\u00eda como objetivo promover h\u00e1bitos de higiene bucodental saludables en la poblaci\u00f3n infantil. Lamentamos comunicar que, debido a problemas log\u00edsticos imprevistos, nos hemos visto obligados a cancelar la actividad. Agradecemos la comprensi\u00f3n.\",\n registrationLink: null,\n moreInfoLink: null,\n cancellationReason: \"Problemas log\u00edsticos con los proveedores de material.\",\n publicationDate: \"2025-06-01\"\n },\n {\n id: 6,\n title: \"Reuni\u00f3n del Grupo de Trabajo de Nutrici\u00f3n\",\n date: \"2025-07-08\",\n endDate: null,\n time: \"19:00\",\n location: \"Sala de Juntas (Online)\",\n category: \"Reuni\u00f3n\",\n status: \"Cerrado\", \/\/ Ya ha pasado o es solo para miembros\n isOnline: true,\n credits: 0,\n summary: \"Reuni\u00f3n peri\u00f3dica del grupo de trabajo para planificar pr\u00f3ximas actividades y revisar protocolos.\",\n description: \"Convocatoria para los miembros del Grupo de Trabajo de Nutrici\u00f3n. Orden del d\u00eda: revisi\u00f3n del acta anterior, propuesta de nuevas formaciones, colaboraci\u00f3n en la campa\u00f1a de alimentaci\u00f3n saludable. Se enviar\u00e1 enlace de conexi\u00f3n por email.\",\n registrationLink: null,\n moreInfoLink: null,\n publicationDate: \"2025-06-25\"\n }\n ];\n \n let currentMonth = new Date().getMonth(); \n let currentYear = new Date().getFullYear(); \n let currentView = 'list';\n const smallScreenBreakpoint = 640; \n \n document.addEventListener('DOMContentLoaded', function() {\n renderListView(); \n setupSearch();\n updateCalendarButtonState(); \n if (currentView === 'calendar' && window.innerWidth > smallScreenBreakpoint) {\n renderCalendar();\n } else if (currentView === 'calendar' && window.innerWidth <= smallScreenBreakpoint) {\n switchView('list'); \n }\n });\n \n function updateCalendarButtonState() {\n const calendarButton = document.getElementById('cefBtnCalendar');\n if (!calendarButton) return;\n\n if (window.innerWidth <= smallScreenBreakpoint) {\n calendarButton.classList.add('cef-view-button-disabled');\n calendarButton.disabled = true;\n } else {\n calendarButton.classList.remove('cef-view-button-disabled');\n calendarButton.disabled = false;\n }\n }\n\n function switchView(view) {\n const calendarButton = document.getElementById('cefBtnCalendar');\n \n if (view === 'calendar' && window.innerWidth <= smallScreenBreakpoint) {\n view = 'list';\n if (calendarButton) {\n calendarButton.classList.add('cef-view-button-disabled');\n calendarButton.disabled = true;\n }\n } else if (view === 'calendar') {\n if (calendarButton) {\n calendarButton.classList.remove('cef-view-button-disabled');\n calendarButton.disabled = false;\n }\n }\n\n currentView = view;\n const listView = document.getElementById('listView'); \n const calendarView = document.getElementById('calendarView');\n const listButton = document.getElementById('cefBtnList');\n \n if (listButton) listButton.classList.remove('active');\n if (calendarButton) calendarButton.classList.remove('active');\n \n if (view === 'list') {\n if(listView) listView.style.display = 'block';\n if(calendarView) calendarView.style.display = 'none';\n if (listButton) listButton.classList.add('active'); \n renderListView(); \n } else { \n if(listView) listView.style.display = 'none';\n if(calendarView) calendarView.style.display = 'block';\n if (calendarButton) calendarButton.classList.add('active'); \n renderCalendar();\n }\n updateCalendarButtonState(); \n }\n \n function renderListView() {\n const eventsGrid = document.getElementById('eventsGrid');\n const searchTermInput = document.getElementById('searchBox');\n if (!eventsGrid || !searchTermInput) return; \n \n const searchTerm = searchTermInput.value.toLowerCase();\n \n const filteredEvents = mockEvents.filter(event => \n event.title.toLowerCase().includes(searchTerm) ||\n (event.summary && event.summary.toLowerCase().includes(searchTerm)) ||\n (event.description && event.description.toLowerCase().includes(searchTerm)) ||\n event.location.toLowerCase().includes(searchTerm) ||\n event.category.toLowerCase().includes(searchTerm)\n );\n \n eventsGrid.innerHTML = ''; \n\n if (filteredEvents.length === 0) {\n eventsGrid.innerHTML = '<p style=\"text-align: center; color: var(--cef-color-text-light); grid-column: 1\/-1; padding: 20px 0;\">No se encontraron eventos.<\/p>';\n return;\n }\n\n filteredEvents.forEach(event => {\n const card = document.createElement('div');\n card.className = `cef-event-card status-${event.status.toLowerCase().replace(' ', '-')}`;\n if (event.status !== \"Cancelado\") { \/\/ Solo permitir click si no est\u00e1 cancelado\n card.onclick = () => showEventDetails(event.id);\n } else {\n card.style.cursor = \"default\";\n }\n\n const marker = document.createElement('div');\n marker.className = 'cef-event-card-marker';\n card.appendChild(marker);\n\n const mainContent = document.createElement('div');\n mainContent.className = 'cef-event-card-main-content';\n\n const header = document.createElement('div');\n header.className = 'cef-event-card-header';\n const titleElement = document.createElement('div'); \n titleElement.className = 'cef-card-title';\n titleElement.textContent = event.title; \n header.appendChild(titleElement);\n mainContent.appendChild(header);\n\n const body = document.createElement('div');\n body.className = 'cef-event-card-body';\n\n let dateText = formatDate(event.date);\n if (event.endDate && event.endDate !== event.date) {\n dateText += ` - ${formatDate(event.endDate)}`;\n }\n\n body.innerHTML = `\n <div class=\"cef-event-meta\">\n <div class=\"cef-event-meta-item\">\n <svg class=\"cef-event-icon\" viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"><\/rect><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"><\/line><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"><\/line><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"><\/line><\/svg>\n <span>${dateText}<\/span>\n <\/div>\n <div class=\"cef-event-meta-item\">\n <svg class=\"cef-event-icon\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><polyline points=\"12 6 12 12 16 14\"><\/polyline><\/svg>\n <span>${event.time}<\/span>\n <\/div>\n <div class=\"cef-event-meta-item\">\n <svg class=\"cef-event-icon\" viewBox=\"0 0 24 24\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"><\/path><circle cx=\"12\" cy=\"10\" r=\"3\"><\/circle><\/svg>\n <span>${event.location}${event.isOnline ? ' <span class=\"cef-event-online-indicator\">(Online)<\/span>' : ''}<\/span>\n <\/div>\n ${event.credits > 0 ? `<div class=\"cef-event-meta-item cef-event-credits\">Cr\u00e9ditos: ${event.credits}<\/div>` : ''}\n <\/div>\n <p class=\"cef-event-description\">${event.summary || event.description.substring(0, 120) + '...'}<\/p> \n <div class=\"cef-event-status-badge status-${event.status.toLowerCase().replace(' ', '-')}\">${event.status}<\/div>\n <div class=\"cef-event-category\">${event.category}<\/div>\n `;\n mainContent.appendChild(body);\n card.appendChild(mainContent);\n eventsGrid.appendChild(card);\n });\n }\n \n function renderCalendar() {\n const calendarGrid = document.getElementById('calendarGrid');\n if (!calendarGrid) return; \n\n const monthNames = [\"ENERO\", \"FEBRERO\", \"MARZO\", \"ABRIL\", \"MAYO\", \"JUNIO\", \n \"JULIO\", \"AGOSTO\", \"SEPTIEMBRE\", \"OCTUBRE\", \"NOVIEMBRE\", \"DICIEMBRE\"];\n \n const currentMonthTitle = document.getElementById('currentMonth');\n if(currentMonthTitle) currentMonthTitle.textContent = `${monthNames[currentMonth]} ${currentYear}`;\n \n const dayHeaders = ['LUN', 'MAR', 'MI\u00c9', 'JUE', 'VIE', 'S\u00c1B', 'DOM'];\n \n calendarGrid.innerHTML = ''; \n \n dayHeaders.forEach(day => {\n const dayHeader = document.createElement('div');\n dayHeader.className = 'cef-calendar-day-header'; \n dayHeader.textContent = day;\n calendarGrid.appendChild(dayHeader);\n });\n \n const firstDayOfMonthDate = new Date(currentYear, currentMonth, 1);\n const lastDayOfMonthDate = new Date(currentYear, currentMonth + 1, 0);\n const prevMonthLastDayDate = new Date(currentYear, currentMonth, 0);\n \n const firstDayOfWeek = (firstDayOfMonthDate.getDay() + 6) % 7; \n const totalDaysInMonth = lastDayOfMonthDate.getDate();\n const prevMonthTotalDays = prevMonthLastDayDate.getDate();\n \n for (let i = firstDayOfWeek - 1; i >= 0; i--) {\n const dayDiv = createDayElement(prevMonthTotalDays - i, true, currentYear, currentMonth -1 < 0 ? 11 : currentMonth -1);\n calendarGrid.appendChild(dayDiv);\n }\n \n for (let day = 1; day <= totalDaysInMonth; day++) {\n const dayDiv = createDayElement(day, false, currentYear, currentMonth);\n \n const dayEvents = getEventsForDay(currentYear, currentMonth, day);\n if (dayEvents.length > 0) {\n dayDiv.classList.add('cef-has-event'); \n \n if (window.innerWidth > 480) { \n dayEvents.slice(0,2).forEach(event => { \n const eventDiv = document.createElement('div');\n eventDiv.className = `cef-calendar-day-event status-${event.status.toLowerCase().replace(' ', '-')}`; \n eventDiv.textContent = event.title.substring(0, 12) + (event.title.length > 12 ? '...' : '');\n eventDiv.title = event.title;\n if (event.status !== \"Cancelado\") {\n eventDiv.onclick = (e) => {\n e.stopPropagation(); \n showEventDetails(event.id);\n };\n } else {\n eventDiv.style.cursor = \"default\";\n }\n dayDiv.appendChild(eventDiv);\n });\n }\n }\n if (dayEvents.length > 0 && dayEvents[0].status !== \"Cancelado\") { \/\/ Permitir click en celda si hay eventos y no est\u00e1n cancelados\n dayDiv.onclick = () => {\n if (dayEvents.length === 1) {\n showEventDetails(dayEvents[0].id);\n } else if (dayEvents.length > 1 && window.innerWidth <= 480) {\n showEventDetails(dayEvents[0].id); \n }\n };\n } else if (dayEvents.length > 0 && dayEvents[0].status === \"Cancelado\") {\n dayDiv.style.cursor = \"default\";\n }\n\n calendarGrid.appendChild(dayDiv);\n }\n \n const totalCellsRendered = firstDayOfWeek + totalDaysInMonth;\n const remainingCells = (7 - (totalCellsRendered % 7)) % 7; \n \n for (let day = 1; day <= remainingCells; day++) {\n const dayDiv = createDayElement(day, true, currentYear, currentMonth + 1 > 11 ? 0 : currentMonth + 1);\n calendarGrid.appendChild(dayDiv);\n }\n }\n \n function createDayElement(day, isOtherMonth, year, month) { \n const dayDiv = document.createElement('div');\n dayDiv.className = `cef-calendar-day ${isOtherMonth ? 'cef-other-month' : ''}`;\n \n const dayNumber = document.createElement('div');\n dayNumber.className = 'cef-calendar-day-number'; \n dayNumber.textContent = day;\n dayDiv.appendChild(dayNumber);\n\n if (!isOtherMonth) {\n const today = new Date();\n const cellDate = new Date(year, month, day);\n\n if (cellDate.getDate() === today.getDate() && \n cellDate.getMonth() === today.getMonth() && \n cellDate.getFullYear() === today.getFullYear()) {\n dayDiv.classList.add('cef-current-day'); \n }\n\n const dayOfWeek = cellDate.getDay();\n if (dayOfWeek === 0 || dayOfWeek === 6) { \n dayDiv.classList.add('cef-weekend-day'); \n }\n }\n \n return dayDiv;\n }\n \n function getEventsForDay(year, month, day) {\n const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;\n return mockEvents.filter(event => event.date === dateStr);\n }\n \n function changeMonth(direction) {\n currentMonth += direction;\n if (currentMonth < 0) {\n currentMonth = 11;\n currentYear--;\n } else if (currentMonth > 11) {\n currentMonth = 0;\n currentYear++;\n }\n renderCalendar();\n }\n \n function showEventDetails(eventId) {\n const event = mockEvents.find(e => e.id === eventId);\n if (!event) return;\n \n const modalTitleEl = document.getElementById('modalTitle');\n const modalDescriptionEl = document.getElementById('modalDescription');\n const eventModalEl = document.getElementById('eventModal');\n const modalMetaContainer = eventModalEl.querySelector('.cef-modal-meta');\n\n if(modalTitleEl) modalTitleEl.textContent = event.title;\n if(modalDescriptionEl) modalDescriptionEl.innerHTML = event.description.replace(\/\\n\/g, '<br>'); \/\/ Permitir saltos de l\u00ednea\n if(modalMetaContainer) {\n modalMetaContainer.innerHTML = ''; \/\/ Limpiar meta anterior\n\n let dateText = formatDate(event.date);\n if (event.endDate && event.endDate !== event.date) {\n dateText += ` al ${formatDate(event.endDate)}`;\n }\n modalMetaContainer.innerHTML += `<div class=\"cef-modal-meta-item\"><strong>Fecha:<\/strong> ${dateText}<\/div>`;\n modalMetaContainer.innerHTML += `<div class=\"cef-modal-meta-item\"><strong>Hora:<\/strong> ${event.time}<\/div>`;\n modalMetaContainer.innerHTML += `<div class=\"cef-modal-meta-item\"><strong>Lugar:<\/strong> ${event.location} ${event.isOnline ? '<span class=\"cef-event-online-indicator\" style=\"margin-left: 5px;\">(Online)<\/span>' : ''}<\/div>`;\n modalMetaContainer.innerHTML += `<div class=\"cef-modal-meta-item\"><strong>Categor\u00eda:<\/strong> <span class=\"cef-event-category\" style=\"margin-top:0; background-color: var(--cef-color-secondary);\">${event.category}<\/span><\/div>`; \/\/ Re-usar estilo\n modalMetaContainer.innerHTML += `<div class=\"cef-modal-meta-item\"><strong>Estado:<\/strong> <span class=\"cef-event-status-badge status-${event.status.toLowerCase().replace(' ', '-')}\">${event.status}<\/span><\/div>`;\n \n if(event.credits > 0) {\n modalMetaContainer.innerHTML += `<div class=\"cef-modal-meta-item\"><strong>Cr\u00e9ditos:<\/strong> ${event.credits}<\/div>`;\n }\n if(event.publicationDate) {\n modalMetaContainer.innerHTML += `<div class=\"cef-modal-meta-item\"><strong>Publicado:<\/strong> ${formatDate(event.publicationDate)}<\/div>`;\n }\n if(event.status === \"Cancelado\" && event.cancellationReason) {\n modalMetaContainer.innerHTML += `<div class=\"cef-modal-meta-item\" style=\"color: var(--cef-status-cancelado-text);\"><strong>Motivo cancelaci\u00f3n:<\/strong> ${event.cancellationReason}<\/div>`;\n }\n if(event.registrationLink) {\n modalMetaContainer.innerHTML += `<div class=\"cef-modal-meta-item\"><strong>Inscripci\u00f3n:<\/strong> <a href=\"${event.registrationLink}\" target=\"_blank\">Enlace de registro<\/a><\/div>`;\n }\n if(event.moreInfoLink) {\n modalMetaContainer.innerHTML += `<div class=\"cef-modal-meta-item\"><strong>M\u00e1s Info:<\/strong> <a href=\"${event.moreInfoLink}\" target=\"_blank\">Consultar detalles<\/a><\/div>`;\n }\n }\n \n if(eventModalEl) eventModalEl.style.display = 'block';\n document.body.style.overflow = 'hidden'; \n }\n \n function closeModal() {\n const eventModalEl = document.getElementById('eventModal');\n if(eventModalEl) eventModalEl.style.display = 'none';\n document.body.style.overflow = 'auto'; \n }\n \n window.onclick = function(event) {\n const modal = document.getElementById('eventModal');\n if (event.target === modal) { \n closeModal();\n }\n }\n \n document.addEventListener('keydown', function(event) {\n if (event.key === 'Escape') {\n closeModal();\n }\n });\n \n function formatDate(dateStr) {\n if (!dateStr) return '';\n const parts = dateStr.split('-');\n \/\/ Asegurarse de que el mes es 0-indexado para el constructor de Date\n const date = new Date(parts[0], parseInt(parts[1], 10) - 1, parseInt(parts[2],10)); \n const options = { year: 'numeric', month: 'long', day: 'numeric' };\n return date.toLocaleDateString('es-ES', options);\n }\n \n function setupSearch() {\n const searchBox = document.getElementById('searchBox');\n if (!searchBox) return;\n let searchTimeout;\n \n searchBox.addEventListener('input', function() {\n clearTimeout(searchTimeout);\n searchTimeout = setTimeout(() => {\n if (currentView === 'list') {\n renderListView();\n }\n \/\/ Para la vista calendario, el filtrado se podr\u00eda aplicar al renderizar\n \/\/ los eventos, pero por simplicidad actual, no se actualiza din\u00e1micamente.\n }, 300); \n });\n }\n \n window.addEventListener('resize', function() {\n updateCalendarButtonState(); \n if (window.innerWidth <= smallScreenBreakpoint && currentView === 'calendar') {\n switchView('list');\n } else if (currentView === 'calendar') {\n renderCalendar();\n }\n });\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-full-width.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-311","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.cofleon.es\/index.php\/wp-json\/wp\/v2\/pages\/311","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cofleon.es\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.cofleon.es\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.cofleon.es\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cofleon.es\/index.php\/wp-json\/wp\/v2\/comments?post=311"}],"version-history":[{"count":5,"href":"https:\/\/www.cofleon.es\/index.php\/wp-json\/wp\/v2\/pages\/311\/revisions"}],"predecessor-version":[{"id":327,"href":"https:\/\/www.cofleon.es\/index.php\/wp-json\/wp\/v2\/pages\/311\/revisions\/327"}],"wp:attachment":[{"href":"https:\/\/www.cofleon.es\/index.php\/wp-json\/wp\/v2\/media?parent=311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":311,"date":"2025-06-02T11:12:14","date_gmt":"2025-06-02T09:12:14","guid":{"rendered":"https:\/\/www.cofleon.es\/?page_id=311"},"modified":"2025-06-03T11:02:55","modified_gmt":"2025-06-03T09:02:55","slug":"calendario-de-eventos","status":"publish","type":"page","link":"https:\/\/www.cofleon.es\/index.php\/calendario-de-eventos\/","title":{"rendered":"Calendario de eventos"},"content":{"rendered":"\n\n\n \n \n Calendario de Eventos - Colegio Farmac\u00e9utico<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --cef-color-primary: #6e2c91;\n --cef-color-secondary: #ed154e;\n --cef-color-background: #ffffff;\n --cef-color-gray-bg: #f5f5f5;\n --cef-color-text: #1a1a1a;\n --cef-color-text-light: #666666;\n --cef-color-border: #e0e0e0;\n --cef-shadow: 0 2px 8px rgba(0,0,0,0.08);\n --cef-shadow-hover: 0 4px 16px rgba(0,0,0,0.12);\n --cef-transition: all 0.3s ease;\n --cef-radius: 4px;\n \/* Colores para estados *\/\n --cef-status-abierto-bg: #d4edda;\n --cef-status-abierto-text: #155724;\n --cef-status-preparacion-bg: #fff3cd;\n --cef-status-preparacion-text: #856404;\n --cef-status-cancelado-bg: #f8d7da;\n --cef-status-cancelado-text: #721c24;\n --cef-status-cerrado-bg: #e2e3e5;\n --cef-status-cerrado-text: #383d41;\n }\n \n .cef-calendar-wrapper * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \n .cef-calendar-wrapper {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n background-color: var(--cef-color-gray-bg);\n color: var(--cef-color-text);\n line-height: 1.6;\n font-size: 16.5px; \n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n \n .cef-container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 20px;\n }\n \n .cef-page-header {\n background-color: var(--cef-color-primary);\n color: white;\n \/*padding: 1.85rem 0; *\/\n text-align: center;\n margin-bottom: 2.75rem; \n }\n \n .cef-page-header .cef-main-title { \n font-family: 'Oswald', 'Arial', sans-serif; \n text-transform: uppercase;\n font-size: clamp(2.1rem, 4.8vw, 3rem); \n font-weight: 600; \n letter-spacing: 0.05em;\n margin: 0;\n color: white;\n }\n \n .cef-search-container {\n display: flex;\n justify-content: center;\n margin-bottom: 2.75rem; \n padding: 0 1rem;\n }\n \n .cef-search-box {\n width: 100%;\n max-width: 580px; \n padding: 0.9rem 1.4rem; \n font-size: 1.3rem; \n font-family: 'Inter', sans-serif;\n border: 1px solid var(--cef-color-border);\n border-radius: var(--cef-radius);\n transition: var(--cef-transition);\n outline: none;\n background-color: white;\n }\n \n .cef-search-box:focus {\n border-color: var(--cef-color-primary);\n box-shadow: 0 0 0 3px rgba(110, 44, 145, 0.2); \n }\n \n .cef-view-selector {\n display: flex;\n justify-content: center;\n margin-bottom: 3.2rem; \n gap: 0;\n }\n \n .cef-view-button {\n padding: 0.8rem 1.85rem; \n background-color: var(--cef-color-gray-bg);\n border: 1px solid var(--cef-color-border);\n cursor: pointer;\n font-size: 1.2rem; \n font-weight: 500;\n font-family: 'Inter', sans-serif;\n transition: var(--cef-transition);\n color: var(--cef-color-text);\n display: flex;\n align-items: center;\n gap: 0.65rem; \n }\n \n .cef-view-button:first-child {\n border-radius: var(--cef-radius) 0 0 var(--cef-radius);\n border-right: none;\n }\n \n .cef-view-button:last-child {\n border-radius: 0 var(--cef-radius) var(--cef-radius) 0;\n }\n \n .cef-view-button.active {\n background-color: var(--cef-color-primary);\n color: white;\n border-color: var(--cef-color-primary);\n position: relative;\n z-index: 1;\n }\n \n .cef-view-button:hover:not(.active):not(.cef-view-button-disabled) {\n background-color: #dcdcdc; \n }\n .cef-view-button.cef-view-button-disabled {\n opacity: 0.5;\n cursor: not-allowed;\n background-color: #e9ecef;\n color: #6c757d;\n }\n \n .cef-view-button svg {\n width: 21px; \n height: 21px;\n stroke: currentColor;\n }\n \n .cef-list-view {\n display: none;\n animation: cef-fadeIn 0.5s ease;\n }\n \n .cef-events-grid {\n display: grid;\n gap: 2.2rem; \n grid-template-columns: repeat(auto-fill, minmax(370px, 1fr)); \n }\n \n .cef-event-card {\n background: white;\n border-radius: var(--cef-radius);\n overflow: hidden;\n box-shadow: var(--cef-shadow);\n transition: var(--cef-transition);\n cursor: pointer;\n display: flex; \n flex-direction: row;\n }\n .cef-event-card.status-cancelado {\n opacity: 0.7;\n background-color: #fcfcfc;\n }\n .cef-event-card.status-cancelado .cef-card-title {\n text-decoration: line-through;\n }\n \n .cef-event-card:hover:not(.status-cancelado) {\n transform: translateY(-4px); \n box-shadow: var(--cef-shadow-hover);\n }\n \n .cef-event-card-marker {\n width: 6px;\n background-color: var(--cef-color-secondary); \n flex-shrink: 0;\n }\n .cef-event-card.status-abierto .cef-event-card-marker { background-color: var(--cef-status-abierto-text); }\n .cef-event-card.status-preparacion .cef-event-card-marker { background-color: var(--cef-status-preparacion-text); }\n .cef-event-card.status-cancelado .cef-event-card-marker { background-color: var(--cef-status-cancelado-text); }\n .cef-event-card.status-cerrado .cef-event-card-marker { background-color: var(--cef-status-cerrado-text); }\n\n\n .cef-event-card-main-content { \n flex-grow: 1;\n }\n \n .cef-event-card-header {\n background-color: var(--cef-color-primary);\n color: white;\n padding: 1.2rem 1.5rem; \n }\n \n .cef-event-card-header .cef-card-title { \n font-family: 'Oswald', 'Arial', sans-serif; \n font-size: 1.85rem; \n font-weight: 500;\n margin: 0;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n line-height: 1.35; \n color: white;\n }\n \n .cef-event-card-body {\n padding: 1.5rem; \n display: flex;\n flex-direction: column;\n gap: 1rem; \n }\n \n .cef-event-meta {\n display: flex;\n flex-direction: column;\n gap: 1.1rem; \n color: var(--cef-color-text-light);\n font-size: 1.1rem; \n }\n \n .cef-event-meta-item {\n display: flex;\n align-items: center;\n gap: 0.7rem; \n }\n \/* Estilo espec\u00edfico para los iconos SVG en tarjetas y modales *\/\n .cef-event-meta-item svg, \n .cef-modal-meta-item svg {\n width: 18px; \n height: 18px;\n fill: none; \/* Asegurar que no haya relleno *\/\n stroke: var(--cef-color-primary); \/* Usar color primario para el trazo *\/\n stroke-width: 2; \/* Ajustar grosor del trazo si es necesario *\/\n flex-shrink: 0;\n }\n .cef-event-online-indicator {\n font-weight: 500;\n color: var(--cef-color-primary);\n }\n .cef-event-credits {\n font-size: 0.85rem;\n color: var(--cef-color-text-light);\n }\n\n .cef-event-status-badge {\n display: inline-block;\n padding: 0.25em 0.6em;\n font-size: 0.8rem;\n font-weight: 500;\n border-radius: var(--cef-radius);\n text-transform: uppercase;\n margin-top: 5px;\n align-self: flex-start;\n }\n .cef-event-status-badge.status-abierto { background-color: var(--cef-status-abierto-bg); color: var(--cef-status-abierto-text); }\n .cef-event-status-badge.status-preparacion { background-color: var(--cef-status-preparacion-bg); color: var(--cef-status-preparacion-text); }\n .cef-event-status-badge.status-cancelado { background-color: var(--cef-status-cancelado-bg); color: var(--cef-status-cancelado-text); }\n .cef-event-status-badge.status-cerrado { background-color: var(--cef-status-cerrado-bg); color: var(--cef-status-cerrado-text); }\n\n \n .cef-event-description {\n color: var(--cef-color-text);\n line-height: 1.65; \n font-size: 1rem; \n\t\t\tmargin: 10px 0 15px!important;\n }\n \n .cef-event-category {\n align-self: flex-start;\n display: inline-block;\n background-color: var(--cef-color-secondary);\n color: white;\n padding: 0.35rem 0.9rem; \n border-radius: var(--cef-radius);\n font-size: 0.85rem; \n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n margin-top: 8px;\n }\n \n .cef-calendar-view {\n display: none;\n animation: cef-fadeIn 0.5s ease;\n }\n \n .cef-calendar-container {\n background: white;\n border-radius: var(--cef-radius);\n padding: 2.3rem; \n box-shadow: var(--cef-shadow);\n }\n \n .cef-calendar-header {\n text-align: center;\n margin-bottom: 2.3rem; \n }\n \n .cef-calendar-header .cef-calendar-title { \n font-family: 'Oswald', 'Arial', sans-serif; \n font-size: 2.7rem; \n font-weight: 500;\n color: var(--cef-color-primary);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n margin-bottom: 1.3rem; \n }\n \n .cef-calendar-nav {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 1.3rem; \n }\n \n .cef-calendar-nav button {\n background-color: var(--cef-color-primary);\n color: white;\n border: none;\n padding: 0.65rem 1.5rem; \n border-radius: var(--cef-radius);\n cursor: pointer;\n font-size: 1.3rem; \n font-weight: 500;\n transition: var(--cef-transition);\n display: flex;\n align-items: center;\n gap: 0.65rem; \n }\n \n .cef-calendar-nav button:hover {\n background-color: #5a2478;\n }\n .cef-calendar-nav button svg {\n width: 18px; \n height: 18px;\n stroke: currentColor;\n }\n\n .cef-calendar-grid {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n gap: 1px;\n background-color: var(--cef-color-border);\n border: 1px solid var(--cef-color-border);\n border-radius: var(--cef-radius);\n overflow: hidden;\n }\n \n .cef-calendar-day-header {\n font-weight: 600;\n text-align: right;\n color: var(--cef-color-primary);\n padding: 1.15rem 0.5rem; \n text-transform: uppercase;\n font-size: 1.4rem; \n letter-spacing: 0.05em;\n background-color: var(--cef-color-gray-bg);\n }\n \n .cef-calendar-day {\n aspect-ratio: 1;\n padding: 0.65rem; \n position: relative;\n background: white;\n transition: var(--cef-transition);\n cursor: pointer;\n display: flex;\n flex-direction: column;\n gap: 0.35rem; \n min-height: 95px; \n }\n \n .cef-calendar-day:hover:not(.cef-other-month) {\n background-color: #f8f4fc;\n }\n\n .cef-calendar-day.cef-weekend-day {\n background-color: #f9f9f9; \n }\n .cef-calendar-day.cef-weekend-day:hover:not(.cef-other-month) {\n background-color: #f1f1f1; \n }\n \n .cef-calendar-day-number {\n font-weight: 500;\n color: var(--cef-color-text);\n font-size: 1.95rem; \n text-align: right;\n width: 100%;\n }\n\n .cef-calendar-day.cef-current-day .cef-calendar-day-number {\n background-color: var(--cef-color-secondary);\n color: white;\n border-radius: 20%;\n width: 1.9em; \n height: 1.9em;\n line-height: 2.1em;\n text-align: center;\n font-weight: 600;\n margin-left: auto;\n margin-right: 0;\n font-size: 1.9rem; \n }\n \n .cef-calendar-day-event {\n background-color: var(--cef-color-primary);\n color: white;\n padding: 0.25rem 0.5rem; \n border-radius: 3px; \n font-size: 1.1rem; \n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n cursor: pointer;\n transition: var(--cef-transition);\n font-weight: 500;\n }\n .cef-calendar-day-event.status-cancelado {\n background-color: var(--cef-status-cancelado-text);\n text-decoration: line-through;\n }\n \n .cef-calendar-day-event:hover {\n background-color: #5a2478;\n }\n \n .cef-calendar-day.cef-other-month {\n opacity: 0.6; \n background-color: #fdfdfd;\n cursor: default;\n }\n .cef-calendar-day.cef-other-month .cef-calendar-day-number {\n color: var(--cef-color-text-light);\n }\n \n .cef-modal {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.8);\n z-index: 10000;\n animation: cef-fadeIn 0.3s ease;\n padding: 1rem;\n overflow-y: auto;\n }\n \n .cef-modal-content {\n position: relative;\n background-color: white;\n margin: 2rem auto;\n width: 100%;\n max-width: 680px; \n border-radius: var(--cef-radius);\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n animation: cef-slideIn 0.3s ease;\n overflow: hidden;\n }\n \n .cef-modal-header {\n background-color: var(--cef-color-primary);\n color: white;\n padding: 1.85rem 2.3rem; \n position: relative;\n }\n \n .cef-modal-header .cef-modal-title { \n font-family: 'Oswald', 'Arial', sans-serif; \n font-size: 1.8rem; \n font-weight: 500;\n margin: 0;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n padding-right: 2.8rem; \n color: white;\n }\n \n .cef-modal-close {\n position: absolute;\n top: 50%;\n right: 1.85rem; \n transform: translateY(-50%);\n background: none;\n color: white;\n border: none;\n width: 38px; \n height: 38px;\n cursor: pointer;\n font-size: 1.85rem; \n font-weight: 300;\n transition: var(--cef-transition);\n display: flex;\n align-items: center;\n justify-content: center;\n line-height: 1;\n opacity: 0.8;\n }\n \n .cef-modal-close:hover {\n opacity: 1;\n transform: translateY(-50%) scale(1.1);\n }\n \n .cef-modal-body {\n padding: 2.3rem; \n }\n \n .cef-modal-meta {\n display: flex;\n flex-direction: column;\n gap: 1rem; \n margin-bottom: 1.5rem; \n color: var(--cef-color-text-light);\n }\n \n .cef-modal-meta-item {\n display: flex;\n align-items: center;\n gap: 0.7rem; \n font-size: 1.25rem; \n }\n .cef-modal-meta-item strong { color: var(--cef-color-text); }\n .cef-modal-meta-item a {\n color: var(--cef-color-primary);\n text-decoration: none;\n font-weight: 500;\n }\n .cef-modal-meta-item a:hover {\n text-decoration: underline;\n color: var(--cef-color-secondary);\n }\n \n .cef-modal-description {\n line-height: 1.7; \n color: var(--cef-color-text);\n font-size: 1.4rem; \n margin-top: 1.5rem;\n }\n \n @keyframes cef-fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n \n @keyframes cef-slideIn {\n from { transform: translateY(-30px); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n }\n \n @media (max-width: 992px) { \n .cef-calendar-day-header { font-size: 0.75rem; padding: 0.8rem 0.3rem; }\n .cef-calendar-day { padding: 0.5rem; min-height: 80px; }\n .cef-calendar-day-number { font-size: 0.85rem; }\n .cef-calendar-day.cef-current-day .cef-calendar-day-number { width: 1.9em; height: 1.9em; line-height: 1.9em; font-size: 0.8rem; }\n .cef-calendar-day-event { font-size: 0.75rem; padding: 0.2rem 0.4rem; }\n }\n\n @media (max-width: 768px) {\n .cef-page-header { padding: 1.5rem 1rem; border-radius: 0; }\n .cef-page-header .cef-main-title { font-size: clamp(1.9rem, 4.2vw, 2.4rem); } \n .cef-search-container, .cef-view-selector { padding: 0 1rem; }\n .cef-search-box { padding: 0.8rem 1.2rem; font-size: 0.95rem; }\n .cef-view-button { padding: 0.7rem 1.4rem; font-size: 0.9rem; }\n .cef-view-button svg { width: 18px; height: 18px; }\n .cef-events-grid { grid-template-columns: 1fr; gap: 1.4rem; padding: 0 1rem; }\n .cef-event-card-header { padding: 1.3rem 1.5rem; }\n .cef-event-card-header .cef-card-title { font-size: 1.3rem; }\n .cef-event-card-body { padding: 1.5rem; }\n .cef-event-meta { font-size: 0.9rem; }\n .cef-event-description { font-size: 1rem; }\n .cef-event-category { font-size: 0.8rem; }\n\n .cef-calendar-container { margin: 0 1rem; padding: 1.3rem; }\n .cef-calendar-header .cef-calendar-title { font-size: 1.7rem; }\n .cef-calendar-nav button { padding: 0.6rem 1.2rem; font-size: 0.85rem; }\n .cef-calendar-nav button svg { width: 16px; height: 16px; }\n \n .cef-calendar-day-header { font-size: 0.65rem; padding: 0.7rem 0.2rem; } \n .cef-calendar-day { padding: 0.25rem; min-height: 65px; } \n .cef-calendar-day.cef-current-day .cef-calendar-day-number { width: 1.8em; height: 1.8em; line-height: 1.8em; font-size: 0.75rem; }\n .cef-calendar-day-number { font-size: 0.75rem; }\n .cef-calendar-day-event { font-size: 0.65rem; padding: 0.15rem 0.3rem; } \n \n .cef-modal-content { margin: 1rem; }\n .cef-modal-header { padding: 1.5rem 1.7rem; }\n .cef-modal-header .cef-modal-title { font-size: 1.5rem; }\n .cef-modal-body { padding: 1.7rem; }\n .cef-modal-meta-item { font-size: 0.95rem; }\n .cef-modal-description { font-size: 1.05rem; }\n }\n \n @media (max-width: 640px) { \n .cef-page-header .cef-main-title { font-size: 1.7rem; }\n .cef-view-button { padding: 0.6rem 1rem; font-size: 0.85rem; }\n .cef-event-card-header .cef-card-title { font-size: 1.2rem; }\n .cef-event-description { font-size: 0.9rem; }\n }\n\n @media (max-width: 480px) { \n .cef-page-header .cef-main-title { font-size: 1.6rem; }\n .cef-view-button { padding: 0.5rem 0.8rem; font-size: 0.8rem; }\n }\n <\/style>\n<\/head>\n<body>\n<div class=\"cef-calendar-wrapper\">\n <div class=\"cef-container\">\n <div class=\"cef-page-header\">\n <div class=\"cef-main-title\">Calendario de Eventos<\/div> \n <\/div>\n \n <div class=\"cef-search-container\">\n <input type=\"text\" class=\"cef-search-box\" id=\"searchBox\" placeholder=\"Buscar eventos...\">\n <\/div>\n \n <div class=\"cef-view-selector\">\n <button class=\"cef-view-button active\" id=\"cefBtnList\" onclick=\"switchView('list')\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <line x1=\"8\" y1=\"6\" x2=\"21\" y2=\"6\"><\/line><line x1=\"8\" y1=\"12\" x2=\"21\" y2=\"12\"><\/line><line x1=\"8\" y1=\"18\" x2=\"21\" y2=\"18\"><\/line><line x1=\"3\" y1=\"6\" x2=\"3.01\" y2=\"6\"><\/line><line x1=\"3\" y1=\"12\" x2=\"3.01\" y2=\"12\"><\/line><line x1=\"3\" y1=\"18\" x2=\"3.01\" y2=\"18\"><\/line>\n <\/svg>\n Lista\n <\/button>\n <button class=\"cef-view-button\" id=\"cefBtnCalendar\" onclick=\"switchView('calendar')\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"><\/rect><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"><\/line><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"><\/line><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"><\/line>\n <\/svg>\n Mes\n <\/button>\n <\/div>\n \n <div id=\"listView\" class=\"cef-list-view\" style=\"display: block;\">\n <div class=\"cef-events-grid\" id=\"eventsGrid\">\n <\/div>\n <\/div>\n \n <div id=\"calendarView\" class=\"cef-calendar-view\">\n <div class=\"cef-calendar-container\">\n <div class=\"cef-calendar-header\">\n <div class=\"cef-calendar-title\" id=\"currentMonth\"><\/div> \n <div class=\"cef-calendar-nav\">\n <button onclick=\"changeMonth(-1)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"15 18 9 12 15 6\"><\/polyline>\n <\/svg>\n Anterior\n <\/button>\n <button onclick=\"changeMonth(1)\">\n Siguiente\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"9 18 15 12 9 6\"><\/polyline>\n <\/svg>\n <\/button>\n <\/div>\n <\/div>\n <div class=\"cef-calendar-grid\" id=\"calendarGrid\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div id=\"eventModal\" class=\"cef-modal\">\n <div class=\"cef-modal-content\">\n <div class=\"cef-modal-header\">\n <div class=\"cef-modal-title\" id=\"modalTitle\"><\/div> \n <button class=\"cef-modal-close\" onclick=\"closeModal()\">\u00d7<\/button>\n <\/div>\n <div class=\"cef-modal-body\">\n <div class=\"cef-modal-meta\">\n <\/div>\n <div class=\"cef-modal-description\" id=\"modalDescription\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n \n<script>\n const mockEvents = [\n {\n id: 1,\n title: \"Jornada Informativa: Nueva Ley del Medicamento\",\n date: \"2025-07-10\",\n endDate: null,\n time: \"17:00 - 19:00\",\n location: \"Sal\u00f3n de Actos Colegial\",\n category: \"Jornada\",\n status: \"Abierto\", \/\/ Abierto, En preparaci\u00f3n, Cancelado, Cerrado\n isOnline: false,\n credits: 0,\n summary: \"An\u00e1lisis y debate sobre las implicaciones de la nueva legislaci\u00f3n farmac\u00e9utica. Ponentes expertos resolver\u00e1n dudas.\",\n description: \"Sesi\u00f3n informativa crucial para todos los colegiados sobre la reci\u00e9n aprobada Ley del Medicamento. Se detallar\u00e1n los cambios m\u00e1s significativos que afectan a la dispensaci\u00f3n, la farmacovigilancia y la gesti\u00f3n de la oficina de farmacia. Contaremos con la presencia de juristas especializados y representantes de la administraci\u00f3n sanitaria. Se abrir\u00e1 un turno de preguntas para resolver todas las dudas. Imprescindible inscripci\u00f3n previa debido aforo limitado.\",\n registrationLink: \"#\",\n moreInfoLink: null,\n publicationDate: \"2025-06-15\"\n },\n {\n id: 2,\n title: \"Curso Online: Gesti\u00f3n Avanzada de Redes Sociales para Farmacias\",\n date: \"2025-07-15\",\n endDate: \"2025-07-29\", \/\/ Evento de varios d\u00edas\n time: \"Acceso 24h\", \/\/ O un horario espec\u00edfico si es s\u00edncrono\n location: \"Plataforma Online del Colegio\",\n category: \"Curso\",\n status: \"Abierto\",\n isOnline: true,\n credits: 5,\n summary: \"Aprende a potenciar la visibilidad de tu farmacia y a interactuar con tus pacientes a trav\u00e9s de estrategias efectivas en redes sociales.\",\n description: \"Curso eminentemente pr\u00e1ctico de 20 horas de duraci\u00f3n, distribuido en 4 m\u00f3dulos. Aprender\u00e1s a crear contenido de valor, gestionar campa\u00f1as publicitarias, analizar m\u00e9tricas y cumplir con la normativa de publicidad sanitaria en el entorno digital. Incluye plantillas, casos de \u00e9xito y tutor\u00edas personalizadas. Plazas limitadas.\",\n registrationLink: \"#\",\n moreInfoLink: \"#\",\n publicationDate: \"2025-06-20\"\n },\n {\n id: 3,\n title: \"Taller Pr\u00e1ctico de Dermofarmacia: Peelings Qu\u00edmicos\",\n date: \"2025-08-05\",\n endDate: null,\n time: \"16:00 - 20:00\",\n location: \"Aula de Formaci\u00f3n Pr\u00e1ctica (Sede Colegial)\",\n category: \"Taller\",\n status: \"En preparaci\u00f3n\",\n isOnline: false,\n credits: 2.5,\n summary: \"Formaci\u00f3n intensiva sobre los diferentes tipos de peelings qu\u00edmicos, indicaciones, protocolos de aplicaci\u00f3n y cuidados post-tratamiento.\",\n description: \"Este taller pr\u00e1ctico est\u00e1 dirigido a farmac\u00e9uticos con inter\u00e9s en ampliar sus conocimientos y habilidades en dermofarmacia avanzada. Se realizar\u00e1 una demostraci\u00f3n pr\u00e1ctica y los asistentes podr\u00e1n resolver sus dudas con expertos en la materia. Material incluido. Grupo reducido para garantizar la calidad de la formaci\u00f3n.\",\n registrationLink: null, \/\/ A\u00fan no abierto\n moreInfoLink: \"#\",\n publicationDate: \"2025-07-01\"\n },\n {\n id: 4,\n title: \"Conferencia Anual: Innovaci\u00f3n en Atenci\u00f3n Primaria\",\n date: \"2025-09-12\",\n endDate: \"2025-09-13\",\n time: \"D\u00eda completo\",\n location: \"Palacio de Congresos Ciudad Real\",\n category: \"Conferencia\",\n status: \"Abierto\",\n isOnline: false,\n credits: 8,\n summary: \"Evento de referencia nacional con ponencias magistrales, mesas redondas y presentaci\u00f3n de comunicaciones sobre el futuro de la atenci\u00f3n primaria.\",\n description: \"La Conferencia Anual reunir\u00e1 a profesionales de todas las disciplinas de la Atenci\u00f3n Primaria para debatir sobre los retos y oportunidades del sector. Temas clave: cronicidad, telefarmacia, humanizaci\u00f3n de la asistencia y colaboraci\u00f3n interprofesional. Env\u00edo de abstracts abierto hasta el 15 de Julio.\",\n registrationLink: \"#\",\n moreInfoLink: \"#\",\n publicationDate: \"2025-05-10\"\n },\n {\n id: 5,\n title: \"Campa\u00f1a de Salud Bucodental Infantil (Cancelada)\",\n date: \"2025-07-20\",\n endDate: null,\n time: \"10:00 - 14:00\",\n location: \"Varias farmacias adheridas\",\n category: \"Campa\u00f1a\",\n status: \"Cancelado\",\n isOnline: false,\n credits: 0,\n summary: \"Actividad de concienciaci\u00f3n y revisi\u00f3n bucodental para ni\u00f1os de 6 a 12 a\u00f1os.\",\n description: \"Esta campa\u00f1a ten\u00eda como objetivo promover h\u00e1bitos de higiene bucodental saludables en la poblaci\u00f3n infantil. Lamentamos comunicar que, debido a problemas log\u00edsticos imprevistos, nos hemos visto obligados a cancelar la actividad. Agradecemos la comprensi\u00f3n.\",\n registrationLink: null,\n moreInfoLink: null,\n cancellationReason: \"Problemas log\u00edsticos con los proveedores de material.\",\n publicationDate: \"2025-06-01\"\n },\n {\n id: 6,\n title: \"Reuni\u00f3n del Grupo de Trabajo de Nutrici\u00f3n\",\n date: \"2025-07-08\",\n endDate: null,\n time: \"19:00\",\n location: \"Sala de Juntas (Online)\",\n category: \"Reuni\u00f3n\",\n status: \"Cerrado\", \/\/ Ya ha pasado o es solo para miembros\n isOnline: true,\n credits: 0,\n summary: \"Reuni\u00f3n peri\u00f3dica del grupo de trabajo para planificar pr\u00f3ximas actividades y revisar protocolos.\",\n description: \"Convocatoria para los miembros del Grupo de Trabajo de Nutrici\u00f3n. Orden del d\u00eda: revisi\u00f3n del acta anterior, propuesta de nuevas formaciones, colaboraci\u00f3n en la campa\u00f1a de alimentaci\u00f3n saludable. Se enviar\u00e1 enlace de conexi\u00f3n por email.\",\n registrationLink: null,\n moreInfoLink: null,\n publicationDate: \"2025-06-25\"\n }\n ];\n \n let currentMonth = new Date().getMonth(); \n let currentYear = new Date().getFullYear(); \n let currentView = 'list';\n const smallScreenBreakpoint = 640; \n \n document.addEventListener('DOMContentLoaded', function() {\n renderListView(); \n setupSearch();\n updateCalendarButtonState(); \n if (currentView === 'calendar' && window.innerWidth > smallScreenBreakpoint) {\n renderCalendar();\n } else if (currentView === 'calendar' && window.innerWidth <= smallScreenBreakpoint) {\n switchView('list'); \n }\n });\n \n function updateCalendarButtonState() {\n const calendarButton = document.getElementById('cefBtnCalendar');\n if (!calendarButton) return;\n\n if (window.innerWidth <= smallScreenBreakpoint) {\n calendarButton.classList.add('cef-view-button-disabled');\n calendarButton.disabled = true;\n } else {\n calendarButton.classList.remove('cef-view-button-disabled');\n calendarButton.disabled = false;\n }\n }\n\n function switchView(view) {\n const calendarButton = document.getElementById('cefBtnCalendar');\n \n if (view === 'calendar' && window.innerWidth <= smallScreenBreakpoint) {\n view = 'list';\n if (calendarButton) {\n calendarButton.classList.add('cef-view-button-disabled');\n calendarButton.disabled = true;\n }\n } else if (view === 'calendar') {\n if (calendarButton) {\n calendarButton.classList.remove('cef-view-button-disabled');\n calendarButton.disabled = false;\n }\n }\n\n currentView = view;\n const listView = document.getElementById('listView'); \n const calendarView = document.getElementById('calendarView');\n const listButton = document.getElementById('cefBtnList');\n \n if (listButton) listButton.classList.remove('active');\n if (calendarButton) calendarButton.classList.remove('active');\n \n if (view === 'list') {\n if(listView) listView.style.display = 'block';\n if(calendarView) calendarView.style.display = 'none';\n if (listButton) listButton.classList.add('active'); \n renderListView(); \n } else { \n if(listView) listView.style.display = 'none';\n if(calendarView) calendarView.style.display = 'block';\n if (calendarButton) calendarButton.classList.add('active'); \n renderCalendar();\n }\n updateCalendarButtonState(); \n }\n \n function renderListView() {\n const eventsGrid = document.getElementById('eventsGrid');\n const searchTermInput = document.getElementById('searchBox');\n if (!eventsGrid || !searchTermInput) return; \n \n const searchTerm = searchTermInput.value.toLowerCase();\n \n const filteredEvents = mockEvents.filter(event => \n event.title.toLowerCase().includes(searchTerm) ||\n (event.summary && event.summary.toLowerCase().includes(searchTerm)) ||\n (event.description && event.description.toLowerCase().includes(searchTerm)) ||\n event.location.toLowerCase().includes(searchTerm) ||\n event.category.toLowerCase().includes(searchTerm)\n );\n \n eventsGrid.innerHTML = ''; \n\n if (filteredEvents.length === 0) {\n eventsGrid.innerHTML = '<p style=\"text-align: center; color: var(--cef-color-text-light); grid-column: 1\/-1; padding: 20px 0;\">No se encontraron eventos.<\/p>';\n return;\n }\n\n filteredEvents.forEach(event => {\n const card = document.createElement('div');\n card.className = `cef-event-card status-${event.status.toLowerCase().replace(' ', '-')}`;\n if (event.status !== \"Cancelado\") { \/\/ Solo permitir click si no est\u00e1 cancelado\n card.onclick = () => showEventDetails(event.id);\n } else {\n card.style.cursor = \"default\";\n }\n\n const marker = document.createElement('div');\n marker.className = 'cef-event-card-marker';\n card.appendChild(marker);\n\n const mainContent = document.createElement('div');\n mainContent.className = 'cef-event-card-main-content';\n\n const header = document.createElement('div');\n header.className = 'cef-event-card-header';\n const titleElement = document.createElement('div'); \n titleElement.className = 'cef-card-title';\n titleElement.textContent = event.title; \n header.appendChild(titleElement);\n mainContent.appendChild(header);\n\n const body = document.createElement('div');\n body.className = 'cef-event-card-body';\n\n let dateText = formatDate(event.date);\n if (event.endDate && event.endDate !== event.date) {\n dateText += ` - ${formatDate(event.endDate)}`;\n }\n\n body.innerHTML = `\n <div class=\"cef-event-meta\">\n <div class=\"cef-event-meta-item\">\n <svg class=\"cef-event-icon\" viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"><\/rect><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"><\/line><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"><\/line><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"><\/line><\/svg>\n <span>${dateText}<\/span>\n <\/div>\n <div class=\"cef-event-meta-item\">\n <svg class=\"cef-event-icon\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><polyline points=\"12 6 12 12 16 14\"><\/polyline><\/svg>\n <span>${event.time}<\/span>\n <\/div>\n <div class=\"cef-event-meta-item\">\n <svg class=\"cef-event-icon\" viewBox=\"0 0 24 24\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"><\/path><circle cx=\"12\" cy=\"10\" r=\"3\"><\/circle><\/svg>\n <span>${event.location}${event.isOnline ? ' <span class=\"cef-event-online-indicator\">(Online)<\/span>' : ''}<\/span>\n <\/div>\n ${event.credits > 0 ? `<div class=\"cef-event-meta-item cef-event-credits\">Cr\u00e9ditos: ${event.credits}<\/div>` : ''}\n <\/div>\n <p class=\"cef-event-description\">${event.summary || event.description.substring(0, 120) + '...'}<\/p> \n <div class=\"cef-event-status-badge status-${event.status.toLowerCase().replace(' ', '-')}\">${event.status}<\/div>\n <div class=\"cef-event-category\">${event.category}<\/div>\n `;\n mainContent.appendChild(body);\n card.appendChild(mainContent);\n eventsGrid.appendChild(card);\n });\n }\n \n function renderCalendar() {\n const calendarGrid = document.getElementById('calendarGrid');\n if (!calendarGrid) return; \n\n const monthNames = [\"ENERO\", \"FEBRERO\", \"MARZO\", \"ABRIL\", \"MAYO\", \"JUNIO\", \n \"JULIO\", \"AGOSTO\", \"SEPTIEMBRE\", \"OCTUBRE\", \"NOVIEMBRE\", \"DICIEMBRE\"];\n \n const currentMonthTitle = document.getElementById('currentMonth');\n if(currentMonthTitle) currentMonthTitle.textContent = `${monthNames[currentMonth]} ${currentYear}`;\n \n const dayHeaders = ['LUN', 'MAR', 'MI\u00c9', 'JUE', 'VIE', 'S\u00c1B', 'DOM'];\n \n calendarGrid.innerHTML = ''; \n \n dayHeaders.forEach(day => {\n const dayHeader = document.createElement('div');\n dayHeader.className = 'cef-calendar-day-header'; \n dayHeader.textContent = day;\n calendarGrid.appendChild(dayHeader);\n });\n \n const firstDayOfMonthDate = new Date(currentYear, currentMonth, 1);\n const lastDayOfMonthDate = new Date(currentYear, currentMonth + 1, 0);\n const prevMonthLastDayDate = new Date(currentYear, currentMonth, 0);\n \n const firstDayOfWeek = (firstDayOfMonthDate.getDay() + 6) % 7; \n const totalDaysInMonth = lastDayOfMonthDate.getDate();\n const prevMonthTotalDays = prevMonthLastDayDate.getDate();\n \n for (let i = firstDayOfWeek - 1; i >= 0; i--) {\n const dayDiv = createDayElement(prevMonthTotalDays - i, true, currentYear, currentMonth -1 < 0 ? 11 : currentMonth -1);\n calendarGrid.appendChild(dayDiv);\n }\n \n for (let day = 1; day <= totalDaysInMonth; day++) {\n const dayDiv = createDayElement(day, false, currentYear, currentMonth);\n \n const dayEvents = getEventsForDay(currentYear, currentMonth, day);\n if (dayEvents.length > 0) {\n dayDiv.classList.add('cef-has-event'); \n \n if (window.innerWidth > 480) { \n dayEvents.slice(0,2).forEach(event => { \n const eventDiv = document.createElement('div');\n eventDiv.className = `cef-calendar-day-event status-${event.status.toLowerCase().replace(' ', '-')}`; \n eventDiv.textContent = event.title.substring(0, 12) + (event.title.length > 12 ? '...' : '');\n eventDiv.title = event.title;\n if (event.status !== \"Cancelado\") {\n eventDiv.onclick = (e) => {\n e.stopPropagation(); \n showEventDetails(event.id);\n };\n } else {\n eventDiv.style.cursor = \"default\";\n }\n dayDiv.appendChild(eventDiv);\n });\n }\n }\n if (dayEvents.length > 0 && dayEvents[0].status !== \"Cancelado\") { \/\/ Permitir click en celda si hay eventos y no est\u00e1n cancelados\n dayDiv.onclick = () => {\n if (dayEvents.length === 1) {\n showEventDetails(dayEvents[0].id);\n } else if (dayEvents.length > 1 && window.innerWidth <= 480) {\n showEventDetails(dayEvents[0].id); \n }\n };\n } else if (dayEvents.length > 0 && dayEvents[0].status === \"Cancelado\") {\n dayDiv.style.cursor = \"default\";\n }\n\n calendarGrid.appendChild(dayDiv);\n }\n \n const totalCellsRendered = firstDayOfWeek + totalDaysInMonth;\n const remainingCells = (7 - (totalCellsRendered % 7)) % 7; \n \n for (let day = 1; day <= remainingCells; day++) {\n const dayDiv = createDayElement(day, true, currentYear, currentMonth + 1 > 11 ? 0 : currentMonth + 1);\n calendarGrid.appendChild(dayDiv);\n }\n }\n \n function createDayElement(day, isOtherMonth, year, month) { \n const dayDiv = document.createElement('div');\n dayDiv.className = `cef-calendar-day ${isOtherMonth ? 'cef-other-month' : ''}`;\n \n const dayNumber = document.createElement('div');\n dayNumber.className = 'cef-calendar-day-number'; \n dayNumber.textContent = day;\n dayDiv.appendChild(dayNumber);\n\n if (!isOtherMonth) {\n const today = new Date();\n const cellDate = new Date(year, month, day);\n\n if (cellDate.getDate() === today.getDate() && \n cellDate.getMonth() === today.getMonth() && \n cellDate.getFullYear() === today.getFullYear()) {\n dayDiv.classList.add('cef-current-day'); \n }\n\n const dayOfWeek = cellDate.getDay();\n if (dayOfWeek === 0 || dayOfWeek === 6) { \n dayDiv.classList.add('cef-weekend-day'); \n }\n }\n \n return dayDiv;\n }\n \n function getEventsForDay(year, month, day) {\n const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;\n return mockEvents.filter(event => event.date === dateStr);\n }\n \n function changeMonth(direction) {\n currentMonth += direction;\n if (currentMonth < 0) {\n currentMonth = 11;\n currentYear--;\n } else if (currentMonth > 11) {\n currentMonth = 0;\n currentYear++;\n }\n renderCalendar();\n }\n \n function showEventDetails(eventId) {\n const event = mockEvents.find(e => e.id === eventId);\n if (!event) return;\n \n const modalTitleEl = document.getElementById('modalTitle');\n const modalDescriptionEl = document.getElementById('modalDescription');\n const eventModalEl = document.getElementById('eventModal');\n const modalMetaContainer = eventModalEl.querySelector('.cef-modal-meta');\n\n if(modalTitleEl) modalTitleEl.textContent = event.title;\n if(modalDescriptionEl) modalDescriptionEl.innerHTML = event.description.replace(\/\\n\/g, '<br>'); \/\/ Permitir saltos de l\u00ednea\n if(modalMetaContainer) {\n modalMetaContainer.innerHTML = ''; \/\/ Limpiar meta anterior\n\n let dateText = formatDate(event.date);\n if (event.endDate && event.endDate !== event.date) {\n dateText += ` al ${formatDate(event.endDate)}`;\n }\n modalMetaContainer.innerHTML += `<div class=\"cef-modal-meta-item\"><strong>Fecha:<\/strong> ${dateText}<\/div>`;\n modalMetaContainer.innerHTML += `<div class=\"cef-modal-meta-item\"><strong>Hora:<\/strong> ${event.time}<\/div>`;\n modalMetaContainer.innerHTML += `<div class=\"cef-modal-meta-item\"><strong>Lugar:<\/strong> ${event.location} ${event.isOnline ? '<span class=\"cef-event-online-indicator\" style=\"margin-left: 5px;\">(Online)<\/span>' : ''}<\/div>`;\n modalMetaContainer.innerHTML += `<div class=\"cef-modal-meta-item\"><strong>Categor\u00eda:<\/strong> <span class=\"cef-event-category\" style=\"margin-top:0; background-color: var(--cef-color-secondary);\">${event.category}<\/span><\/div>`; \/\/ Re-usar estilo\n modalMetaContainer.innerHTML += `<div class=\"cef-modal-meta-item\"><strong>Estado:<\/strong> <span class=\"cef-event-status-badge status-${event.status.toLowerCase().replace(' ', '-')}\">${event.status}<\/span><\/div>`;\n \n if(event.credits > 0) {\n modalMetaContainer.innerHTML += `<div class=\"cef-modal-meta-item\"><strong>Cr\u00e9ditos:<\/strong> ${event.credits}<\/div>`;\n }\n if(event.publicationDate) {\n modalMetaContainer.innerHTML += `<div class=\"cef-modal-meta-item\"><strong>Publicado:<\/strong> ${formatDate(event.publicationDate)}<\/div>`;\n }\n if(event.status === \"Cancelado\" && event.cancellationReason) {\n modalMetaContainer.innerHTML += `<div class=\"cef-modal-meta-item\" style=\"color: var(--cef-status-cancelado-text);\"><strong>Motivo cancelaci\u00f3n:<\/strong> ${event.cancellationReason}<\/div>`;\n }\n if(event.registrationLink) {\n modalMetaContainer.innerHTML += `<div class=\"cef-modal-meta-item\"><strong>Inscripci\u00f3n:<\/strong> <a href=\"${event.registrationLink}\" target=\"_blank\">Enlace de registro<\/a><\/div>`;\n }\n if(event.moreInfoLink) {\n modalMetaContainer.innerHTML += `<div class=\"cef-modal-meta-item\"><strong>M\u00e1s Info:<\/strong> <a href=\"${event.moreInfoLink}\" target=\"_blank\">Consultar detalles<\/a><\/div>`;\n }\n }\n \n if(eventModalEl) eventModalEl.style.display = 'block';\n document.body.style.overflow = 'hidden'; \n }\n \n function closeModal() {\n const eventModalEl = document.getElementById('eventModal');\n if(eventModalEl) eventModalEl.style.display = 'none';\n document.body.style.overflow = 'auto'; \n }\n \n window.onclick = function(event) {\n const modal = document.getElementById('eventModal');\n if (event.target === modal) { \n closeModal();\n }\n }\n \n document.addEventListener('keydown', function(event) {\n if (event.key === 'Escape') {\n closeModal();\n }\n });\n \n function formatDate(dateStr) {\n if (!dateStr) return '';\n const parts = dateStr.split('-');\n \/\/ Asegurarse de que el mes es 0-indexado para el constructor de Date\n const date = new Date(parts[0], parseInt(parts[1], 10) - 1, parseInt(parts[2],10)); \n const options = { year: 'numeric', month: 'long', day: 'numeric' };\n return date.toLocaleDateString('es-ES', options);\n }\n \n function setupSearch() {\n const searchBox = document.getElementById('searchBox');\n if (!searchBox) return;\n let searchTimeout;\n \n searchBox.addEventListener('input', function() {\n clearTimeout(searchTimeout);\n searchTimeout = setTimeout(() => {\n if (currentView === 'list') {\n renderListView();\n }\n \/\/ Para la vista calendario, el filtrado se podr\u00eda aplicar al renderizar\n \/\/ los eventos, pero por simplicidad actual, no se actualiza din\u00e1micamente.\n }, 300); \n });\n }\n \n window.addEventListener('resize', function() {\n updateCalendarButtonState(); \n if (window.innerWidth <= smallScreenBreakpoint && currentView === 'calendar') {\n switchView('list');\n } else if (currentView === 'calendar') {\n renderCalendar();\n }\n });\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-full-width.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-311","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.cofleon.es\/index.php\/wp-json\/wp\/v2\/pages\/311","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cofleon.es\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.cofleon.es\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.cofleon.es\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cofleon.es\/index.php\/wp-json\/wp\/v2\/comments?post=311"}],"version-history":[{"count":5,"href":"https:\/\/www.cofleon.es\/index.php\/wp-json\/wp\/v2\/pages\/311\/revisions"}],"predecessor-version":[{"id":327,"href":"https:\/\/www.cofleon.es\/index.php\/wp-json\/wp\/v2\/pages\/311\/revisions\/327"}],"wp:attachment":[{"href":"https:\/\/www.cofleon.es\/index.php\/wp-json\/wp\/v2\/media?parent=311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}