{"id":1978,"date":"2026-02-26T20:06:38","date_gmt":"2026-02-26T20:06:38","guid":{"rendered":"https:\/\/rohiips.com\/?page_id=1978"},"modified":"2026-03-02T17:05:51","modified_gmt":"2026-03-02T17:05:51","slug":"telemedicina","status":"publish","type":"page","link":"https:\/\/rohiips.com\/index.php\/telemedicina\/","title":{"rendered":"TELEMEDICINA"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n ROHI IPS - Agenda M\u00e9dica Profesional<\/title>\r\n <style>\r\n \/* Variables de colores - Paleta profesional *\/\r\n :root {\r\n --primary: #005b96;\r\n --primary-dark: #003b6a;\r\n --primary-light: #4a90e2;\r\n --secondary: #00a86b;\r\n --success: #4caf50;\r\n --danger: #f44336;\r\n --warning: #ff9800;\r\n --info: #2196f3;\r\n --light: #f8f9fa;\r\n --dark: #2c3e50;\r\n --gray: #6c757d;\r\n --border: #e9ecef;\r\n --shadow: 0 10px 30px rgba(0,0,0,0.1);\r\n --shadow-hover: 0 15px 40px rgba(0,0,0,0.15);\r\n }\r\n\r\n \/* Estilos generales - Fondo BLANCO *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;\r\n background: #ffffff; \/* Fondo blanco puro *\/\r\n min-height: 100vh;\r\n padding: 20px;\r\n }\r\n\r\n .calendario-container {\r\n max-width: 1600px;\r\n margin: 0 auto;\r\n background: white;\r\n border-radius: 40px;\r\n box-shadow: var(--shadow);\r\n overflow: hidden;\r\n }\r\n\r\n \/* Header mejorado - AHORA EN BLANCO *\/\r\n .calendario-header {\r\n background: white; \/* Cambiado de gradiente azul a blanco *\/\r\n padding: 25px 30px;\r\n color: var(--dark); \/* Texto oscuro para contrastar con fondo blanco *\/\r\n border-bottom: 1px solid var(--border);\r\n }\r\n\r\n .header-top {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .logo-container {\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n }\r\n\r\n .logo-icon {\r\n font-size: 48px;\r\n filter: drop-shadow(0 5px 15px rgba(0,0,0,0.1));\r\n }\r\n\r\n .logo-text {\r\n line-height: 1.2;\r\n }\r\n\r\n .logo-ips {\r\n font-size: 32px;\r\n font-weight: 800;\r\n letter-spacing: 2px;\r\n color: var(--primary); \/* Color primario para el logo *\/\r\n }\r\n\r\n .logo-sub {\r\n font-size: 14px;\r\n opacity: 0.7;\r\n text-transform: uppercase;\r\n letter-spacing: 3px;\r\n color: var(--gray);\r\n }\r\n\r\n .hora-actual {\r\n background: var(--light); \/* Fondo gris claro *\/\r\n padding: 15px 30px;\r\n border-radius: 50px;\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n border: 1px solid var(--border);\r\n color: var(--dark);\r\n }\r\n\r\n .hora-icon {\r\n font-size: 28px;\r\n }\r\n\r\n .hora-info {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .hora-info span:first-child {\r\n font-size: 14px;\r\n opacity: 0.7;\r\n color: var(--gray);\r\n }\r\n\r\n .hora-info span:last-child {\r\n font-size: 24px;\r\n font-weight: 700;\r\n font-family: 'Courier New', monospace;\r\n color: var(--primary);\r\n }\r\n\r\n \/* Control de vistas - AHORA EN BLANCO CON BORDES *\/\r\n .vista-control {\r\n display: flex;\r\n gap: 10px;\r\n background: var(--light); \/* Fondo gris claro *\/\r\n padding: 5px;\r\n border-radius: 50px;\r\n border: 1px solid var(--border);\r\n }\r\n\r\n .btn-vista {\r\n padding: 10px 25px;\r\n border: none;\r\n border-radius: 50px;\r\n background: transparent;\r\n color: var(--gray);\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.3s;\r\n font-size: 14px;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n }\r\n\r\n .btn-vista.active {\r\n background: var(--primary);\r\n color: white;\r\n box-shadow: 0 5px 15px rgba(0,91,150,0.2);\r\n }\r\n\r\n .btn-vista:hover:not(.active) {\r\n background: rgba(0,91,150,0.1);\r\n color: var(--primary);\r\n }\r\n\r\n \/* Controles de navegaci\u00f3n - AHORA EN BLANCO *\/\r\n .navegacion-calendario {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-top: 20px;\r\n }\r\n\r\n .nav-group {\r\n display: flex;\r\n gap: 15px;\r\n align-items: center;\r\n }\r\n\r\n .btn-nav {\r\n background: var(--light);\r\n border: 1px solid var(--border);\r\n color: var(--primary);\r\n width: 45px;\r\n height: 45px;\r\n border-radius: 15px;\r\n cursor: pointer;\r\n font-size: 20px;\r\n transition: all 0.3s;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .btn-nav:hover {\r\n background: var(--primary);\r\n color: white;\r\n transform: translateY(-2px);\r\n border-color: var(--primary);\r\n }\r\n\r\n .btn-hoy {\r\n background: var(--primary);\r\n color: white;\r\n padding: 12px 30px;\r\n border: none;\r\n border-radius: 15px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.3s;\r\n box-shadow: 0 5px 15px rgba(0,91,150,0.2);\r\n }\r\n\r\n .btn-hoy:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 25px rgba(0,91,150,0.3);\r\n background: var(--primary-dark);\r\n }\r\n\r\n #titulo-fecha {\r\n font-size: 28px;\r\n font-weight: 600;\r\n color: var(--primary);\r\n }\r\n\r\n \/* Stats Cards mejorados *\/\r\n .stats-container {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 20px;\r\n padding: 25px 30px;\r\n background: white;\r\n }\r\n\r\n .stat-card {\r\n background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\r\n padding: 20px;\r\n border-radius: 20px;\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n transition: all 0.3s;\r\n border: 1px solid var(--border);\r\n }\r\n\r\n .stat-card:hover {\r\n transform: translateY(-5px);\r\n box-shadow: var(--shadow);\r\n border-color: var(--primary-light);\r\n }\r\n\r\n .stat-icon {\r\n font-size: 36px;\r\n background: white;\r\n width: 60px;\r\n height: 60px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 18px;\r\n box-shadow: 0 5px 15px rgba(0,0,0,0.08);\r\n }\r\n\r\n .stat-info {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .stat-value {\r\n font-size: 32px;\r\n font-weight: 700;\r\n color: var(--dark);\r\n line-height: 1.2;\r\n }\r\n\r\n .stat-label {\r\n font-size: 14px;\r\n color: var(--gray);\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n }\r\n\r\n \/* Filtros profesionales *\/\r\n .filtros-container {\r\n background: white;\r\n padding: 20px 30px;\r\n display: flex;\r\n gap: 20px;\r\n border-bottom: 1px solid var(--border);\r\n flex-wrap: wrap;\r\n }\r\n\r\n .filtro-group {\r\n flex: 1;\r\n min-width: 200px;\r\n }\r\n\r\n .filtro-group label {\r\n display: block;\r\n margin-bottom: 8px;\r\n font-weight: 600;\r\n color: var(--dark);\r\n font-size: 13px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n }\r\n\r\n .filtro-select, .filtro-fecha {\r\n width: 100%;\r\n padding: 12px 15px;\r\n border: 2px solid var(--border);\r\n border-radius: 12px;\r\n font-size: 14px;\r\n transition: all 0.3s;\r\n background: white;\r\n }\r\n\r\n .filtro-select:focus, .filtro-fecha:focus {\r\n outline: none;\r\n border-color: var(--primary);\r\n box-shadow: 0 0 0 4px rgba(0,91,150,0.1);\r\n }\r\n\r\n .btn-filtrar, .btn-limpiar {\r\n padding: 12px 25px;\r\n border: none;\r\n border-radius: 12px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.3s;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n justify-content: center;\r\n width: 100%;\r\n }\r\n\r\n .btn-filtrar {\r\n background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n color: white;\r\n }\r\n\r\n .btn-filtrar:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 5px 20px rgba(0,91,150,0.3);\r\n }\r\n\r\n .btn-limpiar {\r\n background: var(--light);\r\n color: var(--dark);\r\n border: 1px solid var(--border);\r\n }\r\n\r\n .btn-limpiar:hover {\r\n background: #e9ecef;\r\n }\r\n\r\n \/* Leyenda *\/\r\n .leyenda-container {\r\n background: white;\r\n padding: 15px 30px;\r\n display: flex;\r\n gap: 40px;\r\n border-bottom: 1px solid var(--border);\r\n }\r\n\r\n .leyenda-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-size: 14px;\r\n color: var(--dark);\r\n }\r\n\r\n .color-indicator {\r\n width: 16px;\r\n height: 16px;\r\n border-radius: 6px;\r\n }\r\n\r\n .color-disponible { background: linear-gradient(135deg, #4caf50, #45a049); }\r\n .color-reservado { background: linear-gradient(135deg, #f44336, #d32f2f); }\r\n .color-propio { background: linear-gradient(135deg, #9c27b0, #7b1fa2); }\r\n\r\n \/* Contenedor principal del calendario *\/\r\n .calendario-wrapper {\r\n padding: 30px;\r\n background: white;\r\n min-height: 600px;\r\n }\r\n\r\n \/* VISTA MES *\/\r\n .vista-mes {\r\n display: grid;\r\n grid-template-columns: repeat(7, 1fr);\r\n gap: 10px;\r\n }\r\n\r\n .dia-semana {\r\n text-align: center;\r\n font-weight: 700;\r\n color: var(--primary);\r\n padding: 15px;\r\n background: var(--light);\r\n border-radius: 12px;\r\n font-size: 14px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n }\r\n\r\n .dia-celda {\r\n background: var(--light);\r\n border-radius: 15px;\r\n padding: 15px;\r\n min-height: 120px;\r\n cursor: pointer;\r\n transition: all 0.3s;\r\n border: 2px solid transparent;\r\n position: relative;\r\n }\r\n\r\n .dia-celda:hover {\r\n transform: translateY(-2px);\r\n border-color: var(--primary);\r\n box-shadow: var(--shadow);\r\n }\r\n\r\n .dia-celda.hoy {\r\n border-color: var(--primary);\r\n background: #f0f7ff;\r\n }\r\n\r\n .dia-celda.otro-mes {\r\n opacity: 0.5;\r\n }\r\n\r\n .numero-dia {\r\n font-weight: 700;\r\n font-size: 18px;\r\n color: var(--dark);\r\n margin-bottom: 10px;\r\n }\r\n\r\n \/* VISTA SEMANA *\/\r\n .vista-semana {\r\n display: grid;\r\n grid-template-columns: 100px repeat(7, 1fr);\r\n gap: 5px;\r\n background: var(--light);\r\n border-radius: 20px;\r\n overflow: hidden;\r\n }\r\n\r\n .hora-label {\r\n background: white;\r\n padding: 15px;\r\n text-align: center;\r\n font-weight: 600;\r\n color: var(--primary);\r\n border-right: 1px solid var(--border);\r\n font-size: 13px;\r\n }\r\n\r\n .columna-dia {\r\n background: white;\r\n min-width: 120px;\r\n }\r\n\r\n .celda-hora {\r\n border-bottom: 1px solid var(--border);\r\n padding: 10px;\r\n min-height: 60px;\r\n position: relative;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n }\r\n\r\n .celda-hora:hover {\r\n background: #f0f7ff;\r\n }\r\n\r\n .evento-semana {\r\n background: linear-gradient(135deg, #4caf50, #45a049);\r\n color: white;\r\n padding: 8px;\r\n border-radius: 8px;\r\n font-size: 11px;\r\n margin: 2px 0;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\r\n }\r\n\r\n .evento-semana.reservado {\r\n background: linear-gradient(135deg, #f44336, #d32f2f);\r\n }\r\n\r\n .evento-semana.mio {\r\n background: linear-gradient(135deg, #9c27b0, #7b1fa2);\r\n }\r\n\r\n .evento-semana:hover {\r\n transform: translateX(2px);\r\n box-shadow: 0 5px 10px rgba(0,0,0,0.15);\r\n }\r\n\r\n \/* VISTA D\u00cdA *\/\r\n .vista-dia {\r\n display: grid;\r\n grid-template-columns: 100px 1fr;\r\n gap: 10px;\r\n background: var(--light);\r\n border-radius: 20px;\r\n overflow: hidden;\r\n }\r\n\r\n .linea-tiempo {\r\n background: white;\r\n padding: 15px 0;\r\n }\r\n\r\n .hora-tiempo {\r\n padding: 15px;\r\n text-align: right;\r\n font-weight: 600;\r\n color: var(--primary);\r\n border-bottom: 1px solid var(--border);\r\n font-size: 13px;\r\n height: 60px;\r\n }\r\n\r\n .columna-eventos-dia {\r\n background: white;\r\n padding: 15px 0;\r\n position: relative;\r\n }\r\n\r\n .bloque-hora-dia {\r\n height: 60px;\r\n border-bottom: 1px solid var(--border);\r\n position: relative;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n }\r\n\r\n .bloque-hora-dia:hover {\r\n background: #f0f7ff;\r\n }\r\n\r\n .evento-dia {\r\n position: absolute;\r\n left: 5px;\r\n right: 5px;\r\n background: linear-gradient(135deg, #4caf50, #45a049);\r\n color: white;\r\n padding: 10px;\r\n border-radius: 12px;\r\n font-size: 13px;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n z-index: 10;\r\n box-shadow: 0 5px 15px rgba(0,0,0,0.15);\r\n border-left: 4px solid rgba(255,255,255,0.5);\r\n }\r\n\r\n .evento-dia.reservado {\r\n background: linear-gradient(135deg, #f44336, #d32f2f);\r\n }\r\n\r\n .evento-dia.mio {\r\n background: linear-gradient(135deg, #9c27b0, #7b1fa2);\r\n }\r\n\r\n .evento-dia:hover {\r\n transform: scale(1.02);\r\n box-shadow: 0 8px 25px rgba(0,0,0,0.2);\r\n }\r\n\r\n \/* Badges para citas *\/\r\n .cita-badge {\r\n font-size: 11px;\r\n padding: 4px 8px;\r\n border-radius: 20px;\r\n color: white;\r\n margin: 3px 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n }\r\n\r\n .cita-badge.disponible {\r\n background: linear-gradient(135deg, #4caf50, #45a049);\r\n }\r\n\r\n .cita-badge.reservado {\r\n background: linear-gradient(135deg, #f44336, #d32f2f);\r\n }\r\n\r\n .cita-badge.mio {\r\n background: linear-gradient(135deg, #9c27b0, #7b1fa2);\r\n }\r\n\r\n .cita-badge:hover {\r\n transform: translateX(2px);\r\n box-shadow: 0 2px 8px rgba(0,0,0,0.2);\r\n }\r\n\r\n \/* Estilos para los links de videollamada en las citas *\/\r\n .link-cita {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 3px;\r\n background: rgba(255, 255, 255, 0.2);\r\n padding: 2px 8px;\r\n border-radius: 12px;\r\n font-size: 10px;\r\n color: white;\r\n text-decoration: none;\r\n transition: all 0.2s;\r\n margin-left: 5px;\r\n border: 1px solid rgba(255,255,255,0.1);\r\n }\r\n\r\n .link-cita:hover {\r\n background: rgba(255, 255, 255, 0.4);\r\n transform: translateY(-1px);\r\n box-shadow: 0 2px 5px rgba(0,0,0,0.2);\r\n }\r\n\r\n \/* Tooltip para mostrar el link completo al hacer hover *\/\r\n .link-cita {\r\n position: relative;\r\n }\r\n\r\n .link-cita:hover::after {\r\n content: attr(href);\r\n position: absolute;\r\n bottom: 100%;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n background: var(--dark);\r\n color: white;\r\n padding: 5px 10px;\r\n border-radius: 8px;\r\n font-size: 10px;\r\n white-space: nowrap;\r\n z-index: 1000;\r\n margin-bottom: 5px;\r\n box-shadow: 0 5px 15px rgba(0,0,0,0.2);\r\n pointer-events: none;\r\n }\r\n\r\n \/* Modal mejorado *\/\r\n .modal {\r\n display: none;\r\n position: fixed;\r\n z-index: 1000;\r\n left: 0;\r\n top: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0,0,0,0.5);\r\n backdrop-filter: blur(5px);\r\n animation: fadeIn 0.3s;\r\n }\r\n\r\n @keyframes fadeIn {\r\n from { opacity: 0; }\r\n to { opacity: 1; }\r\n }\r\n\r\n .modal-contenido {\r\n background: white;\r\n margin: 3% auto;\r\n padding: 40px;\r\n border-radius: 30px;\r\n width: 90%;\r\n max-width: 700px;\r\n box-shadow: 0 30px 80px rgba(0,0,0,0.3);\r\n animation: slideUp 0.4s;\r\n position: relative;\r\n }\r\n\r\n @keyframes slideUp {\r\n from {\r\n transform: translateY(50px);\r\n opacity: 0;\r\n }\r\n to {\r\n transform: translateY(0);\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .modal-header {\r\n display: flex;\r\n align-items: center;\r\n gap: 20px;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .modal-icon {\r\n font-size: 48px;\r\n background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n width: 80px;\r\n height: 80px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 25px;\r\n color: white;\r\n }\r\n\r\n .modal-header h3 {\r\n font-size: 28px;\r\n color: var(--dark);\r\n margin: 0;\r\n }\r\n\r\n .cerrar-modal {\r\n position: absolute;\r\n right: 30px;\r\n top: 30px;\r\n width: 45px;\r\n height: 45px;\r\n background: var(--light);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 24px;\r\n cursor: pointer;\r\n color: var(--gray);\r\n transition: all 0.3s;\r\n }\r\n\r\n .cerrar-modal:hover {\r\n background: #fee;\r\n color: var(--danger);\r\n transform: rotate(90deg);\r\n }\r\n\r\n .detalle-cita {\r\n background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n color: white;\r\n padding: 25px;\r\n border-radius: 20px;\r\n margin: 20px 0 30px;\r\n box-shadow: 0 10px 30px rgba(0,91,150,0.3);\r\n }\r\n\r\n .form-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 20px;\r\n }\r\n\r\n .full-width {\r\n grid-column: span 2;\r\n }\r\n\r\n .campo-formulario label {\r\n display: block;\r\n margin-bottom: 8px;\r\n font-weight: 600;\r\n color: var(--dark);\r\n font-size: 14px;\r\n }\r\n\r\n .campo-formulario input,\r\n .campo-formulario textarea,\r\n .campo-formulario select {\r\n width: 100%;\r\n padding: 12px 15px;\r\n border: 2px solid var(--border);\r\n border-radius: 12px;\r\n font-size: 14px;\r\n transition: all 0.3s;\r\n font-family: inherit;\r\n }\r\n\r\n .campo-formulario input:focus,\r\n .campo-formulario textarea:focus,\r\n .campo-formulario select:focus {\r\n outline: none;\r\n border-color: var(--primary);\r\n box-shadow: 0 0 0 4px rgba(0,91,150,0.1);\r\n }\r\n\r\n .modal-botones {\r\n display: flex;\r\n gap: 15px;\r\n margin-top: 30px;\r\n }\r\n\r\n .btn-cancelar, .btn-confirmar {\r\n flex: 1;\r\n padding: 15px;\r\n border: none;\r\n border-radius: 15px;\r\n font-weight: 600;\r\n font-size: 16px;\r\n cursor: pointer;\r\n transition: all 0.3s;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 10px;\r\n }\r\n\r\n .btn-cancelar {\r\n background: #fee;\r\n color: var(--danger);\r\n border: 1px solid #fcc;\r\n }\r\n\r\n .btn-cancelar:hover {\r\n background: #fcc;\r\n transform: translateY(-2px);\r\n }\r\n\r\n .btn-confirmar {\r\n background: linear-gradient(135deg, #4caf50, #45a049);\r\n color: white;\r\n box-shadow: 0 5px 20px rgba(76,175,80,0.3);\r\n }\r\n\r\n .btn-confirmar:hover:not(:disabled) {\r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 30px rgba(76,175,80,0.4);\r\n }\r\n\r\n .btn-confirmar:disabled {\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n }\r\n\r\n \/* Tabla de disponibilidad *\/\r\n .disponibilidad-detalle {\r\n padding: 30px;\r\n background: white;\r\n border-top: 1px solid var(--border);\r\n }\r\n\r\n .tabla-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .tabla-header h3 {\r\n font-size: 22px;\r\n color: var(--dark);\r\n }\r\n\r\n .btn-exportar {\r\n background: var(--light);\r\n border: 1px solid var(--border);\r\n padding: 12px 25px;\r\n border-radius: 12px;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-weight: 600;\r\n transition: all 0.3s;\r\n }\r\n\r\n .btn-exportar:hover {\r\n background: #e9ecef;\r\n transform: translateY(-2px);\r\n }\r\n\r\n .tabla-wrapper {\r\n overflow-x: auto;\r\n border-radius: 20px;\r\n border: 1px solid var(--border);\r\n }\r\n\r\n .tabla-disponibilidad {\r\n width: 100%;\r\n border-collapse: collapse;\r\n min-width: 1000px;\r\n }\r\n\r\n .tabla-disponibilidad th {\r\n background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n color: white;\r\n padding: 18px;\r\n font-weight: 600;\r\n font-size: 14px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n }\r\n\r\n .tabla-disponibilidad td {\r\n padding: 15px;\r\n border-bottom: 1px solid var(--border);\r\n text-align: center;\r\n font-size: 14px;\r\n }\r\n\r\n .tabla-disponibilidad tbody tr:hover {\r\n background: #f8f9fa;\r\n }\r\n\r\n .link-meet {\r\n color: var(--primary);\r\n text-decoration: none;\r\n font-weight: 600;\r\n padding: 8px 15px;\r\n background: #e3f2fd;\r\n border-radius: 8px;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 5px;\r\n transition: all 0.3s;\r\n }\r\n\r\n .link-meet:hover {\r\n background: #bbdefb;\r\n transform: translateY(-2px);\r\n }\r\n\r\n .badge-estado {\r\n padding: 6px 15px;\r\n border-radius: 50px;\r\n font-weight: 600;\r\n font-size: 12px;\r\n text-transform: uppercase;\r\n }\r\n\r\n .badge-disponible {\r\n background: #e8f5e9;\r\n color: #2e7d32;\r\n }\r\n\r\n .btn-reservar {\r\n background: linear-gradient(135deg, #4caf50, #45a049);\r\n color: white;\r\n border: none;\r\n padding: 10px 20px;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n font-weight: 600;\r\n transition: all 0.3s;\r\n }\r\n\r\n .btn-reservar:hover:not(:disabled) {\r\n transform: translateY(-2px);\r\n box-shadow: 0 5px 15px rgba(76,175,80,0.3);\r\n }\r\n\r\n .btn-reservar:disabled {\r\n background: var(--gray);\r\n cursor: not-allowed;\r\n opacity: 0.6;\r\n }\r\n\r\n \/* Notificaciones *\/\r\n .email-notification {\r\n position: fixed;\r\n bottom: 30px;\r\n right: 30px;\r\n background: white;\r\n padding: 20px 30px;\r\n border-radius: 15px;\r\n box-shadow: 0 10px 40px rgba(0,0,0,0.2);\r\n border-left: 4px solid #4caf50;\r\n z-index: 1001;\r\n animation: slideInRight 0.3s;\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n }\r\n\r\n @keyframes slideInRight {\r\n from {\r\n transform: translateX(100%);\r\n opacity: 0;\r\n }\r\n to {\r\n transform: translateX(0);\r\n opacity: 1;\r\n }\r\n }\r\n\r\n \/* Versi\u00f3n simplificada para m\u00f3viles *\/\r\n @media (max-width: 768px) {\r\n .header-top {\r\n flex-direction: column;\r\n gap: 15px;\r\n }\r\n \r\n .hora-actual {\r\n width: 100%;\r\n justify-content: center;\r\n }\r\n \r\n .navegacion-calendario {\r\n flex-direction: column;\r\n gap: 15px;\r\n }\r\n \r\n .form-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .full-width {\r\n grid-column: span 1;\r\n }\r\n \r\n .vista-control {\r\n width: 100%;\r\n }\r\n \r\n .btn-vista {\r\n flex: 1;\r\n text-align: center;\r\n }\r\n \r\n .stats-container {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n\r\n .link-cita {\r\n padding: 2px 4px;\r\n font-size: 8px;\r\n }\r\n \r\n .link-cita:hover::after {\r\n display: none;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .stats-container {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .filtros-container {\r\n flex-direction: column;\r\n }\r\n \r\n .filtro-group {\r\n min-width: 100%;\r\n }\r\n \r\n .leyenda-container {\r\n flex-direction: column;\r\n gap: 10px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"calendario-container\">\r\n <!-- Header profesional - AHORA EN BLANCO -->\r\n <div class=\"calendario-header\">\r\n <div class=\"header-top\">\r\n <div class=\"logo-container\">\r\n <div class=\"logo-icon\">\u2695\ufe0f<\/div>\r\n <div class=\"logo-text\">\r\n <div class=\"logo-ips\">ROHI IPS<\/div>\r\n <div class=\"logo-sub\">SALUD CON TECNOLOG\u00cdA<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"hora-actual\" id=\"hora-actual\">\r\n <div class=\"hora-icon\">\u23f0<\/div>\r\n <div class=\"hora-info\">\r\n <span id=\"fecha-actual\"><\/span>\r\n <span id=\"hora-actual-reloj\"><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- Selector de vistas - AHORA EN BLANCO -->\r\n <div class=\"vista-control\">\r\n <button class=\"btn-vista active\" onclick=\"cambiarVista('mes')\">\ud83d\udcc5 MES<\/button>\r\n <button class=\"btn-vista\" onclick=\"cambiarVista('semana')\">\ud83d\udcc6 SEMANA<\/button>\r\n <button class=\"btn-vista\" onclick=\"cambiarVista('dia')\">\ud83d\udccb D\u00cdA<\/button>\r\n <\/div>\r\n \r\n <!-- Navegaci\u00f3n - AHORA EN BLANCO -->\r\n <div class=\"navegacion-calendario\">\r\n <div class=\"nav-group\">\r\n <button class=\"btn-nav\" onclick=\"navegar(-1)\">\u2190<\/button>\r\n <button class=\"btn-nav\" onclick=\"navegar(1)\">\u2192<\/button>\r\n <button class=\"btn-hoy\" onclick=\"irAHoy()\">\ud83d\udcc5 Hoy<\/button>\r\n <\/div>\r\n <h2 id=\"titulo-fecha\">marzo de 2026<\/h2>\r\n <div><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Stats Cards -->\r\n <div class=\"stats-container\">\r\n <div class=\"stat-card\">\r\n <div class=\"stat-icon\">\ud83d\udc68\u200d\u2695\ufe0f<\/div>\r\n <div class=\"stat-info\">\r\n <span class=\"stat-value\" id=\"total-doctores\">4<\/span>\r\n <span class=\"stat-label\">Doctores<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <div class=\"stat-icon\">\ud83d\udcc5<\/div>\r\n <div class=\"stat-info\">\r\n <span class=\"stat-value\" id=\"citas-hoy\">0<\/span>\r\n <span class=\"stat-label\">Citas hoy<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <div class=\"stat-icon\">\ud83d\udfe2<\/div>\r\n <div class=\"stat-info\">\r\n <span class=\"stat-value\" id=\"disponibles-hoy\">0<\/span>\r\n <span class=\"stat-label\">Disponibles<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <div class=\"stat-icon\">\ud83d\udcca<\/div>\r\n <div class=\"stat-info\">\r\n <span class=\"stat-value\" id=\"total-citas\">0<\/span>\r\n <span class=\"stat-label\">Total citas<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Filtros -->\r\n <div class=\"filtros-container\">\r\n <div class=\"filtro-group\">\r\n <label>\ud83d\udc68\u200d\u2695\ufe0f DOCTOR<\/label>\r\n <select id=\"filtro-doctor\" class=\"filtro-select\">\r\n <option value=\"todos\">Todos los doctores<\/option>\r\n <option value=\"Dr. Juan D\u00edaz\">Dr. Juan D\u00edaz - Director<\/option>\r\n <option value=\"Dr. Garc\u00eda\">Dr. Garc\u00eda - Cardiolog\u00eda<\/option>\r\n <option value=\"Dra. Mart\u00ednez\">Dra. Mart\u00ednez - Pediatr\u00eda<\/option>\r\n <option value=\"Dr. Rodr\u00edguez\">Dr. Rodr\u00edguez - Neurolog\u00eda<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"filtro-group\">\r\n <label>\ud83d\udcc5 FECHA<\/label>\r\n <input type=\"date\" id=\"fecha-filtro\" class=\"filtro-fecha\">\r\n <\/div>\r\n <div class=\"filtro-group\">\r\n <label> <\/label>\r\n <button class=\"btn-filtrar\" onclick=\"aplicarFiltros()\">\ud83d\udd0d Buscar<\/button>\r\n <\/div>\r\n <div class=\"filtro-group\">\r\n <label> <\/label>\r\n <button class=\"btn-limpiar\" onclick=\"limpiarFiltros()\">\ud83d\udd04 Limpiar<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Leyenda -->\r\n <div class=\"leyenda-container\">\r\n <div class=\"leyenda-item\">\r\n <span class=\"color-indicator color-disponible\"><\/span>\r\n <span>Disponible<\/span>\r\n <span class=\"badge-estado\" id=\"count-disponible\">0<\/span>\r\n <\/div>\r\n <div class=\"leyenda-item\">\r\n <span class=\"color-indicator color-reservado\"><\/span>\r\n <span>Reservado<\/span>\r\n <span class=\"badge-estado\" id=\"count-reservado\">0<\/span>\r\n <\/div>\r\n <div class=\"leyenda-item\">\r\n <span class=\"color-indicator color-propio\"><\/span>\r\n <span>Mis Citas<\/span>\r\n <span class=\"badge-estado\" id=\"count-mis-citas\">0<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Contenedor del calendario (se actualiza din\u00e1micamente) -->\r\n <div class=\"calendario-wrapper\" id=\"calendario-contenedor\"><\/div>\r\n\r\n <!-- Modal de Reserva -->\r\n <div id=\"modal-reserva\" class=\"modal\">\r\n <div class=\"modal-contenido\">\r\n <span class=\"cerrar-modal\" onclick=\"cerrarModal()\">×<\/span>\r\n <div class=\"modal-header\">\r\n <div class=\"modal-icon\">\ud83d\udcdd<\/div>\r\n <h3>Confirmar Reserva<\/h3>\r\n <\/div>\r\n \r\n <div id=\"detalle-cita\" class=\"detalle-cita\"><\/div>\r\n \r\n <form id=\"formulario-reserva\" onsubmit=\"guardarReserva(event)\">\r\n <div class=\"form-grid\">\r\n <div class=\"campo-formulario full-width\">\r\n <label>Nombre Completo *<\/label>\r\n <input type=\"text\" id=\"nombre\" required placeholder=\"Ej: Juan P\u00e9rez\">\r\n <\/div>\r\n <div class=\"campo-formulario\">\r\n <label>Correo *<\/label>\r\n <input type=\"email\" id=\"correo\" required placeholder=\"ejemplo@correo.com\">\r\n <\/div>\r\n <div class=\"campo-formulario\">\r\n <label>Documento *<\/label>\r\n <input type=\"text\" id=\"documento\" required placeholder=\"123456789\">\r\n <\/div>\r\n <div class=\"campo-formulario\">\r\n <label>Tel\u00e9fono<\/label>\r\n <input type=\"tel\" id=\"telefono\" placeholder=\"3001234567\">\r\n <\/div>\r\n <div class=\"campo-formulario full-width\">\r\n <label>Motivo de consulta<\/label>\r\n <textarea id=\"motivo\" rows=\"3\" placeholder=\"Describa brevemente su motivo...\"><\/textarea>\r\n <\/div>\r\n <\/div>\r\n \r\n <input type=\"hidden\" id=\"fecha-reserva\">\r\n <input type=\"hidden\" id=\"hora-reserva\">\r\n <input type=\"hidden\" id=\"doctor-reserva\">\r\n <input type=\"hidden\" id=\"especialidad-reserva\">\r\n <input type=\"hidden\" id=\"link-meet-reserva\">\r\n <input type=\"hidden\" id=\"estado-reserva\">\r\n \r\n <div class=\"modal-botones\">\r\n <button type=\"button\" class=\"btn-cancelar\" onclick=\"cerrarModal()\">\u2716 Cancelar<\/button>\r\n <button type=\"submit\" class=\"btn-confirmar\">\u2705 Confirmar Reserva<\/button>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Tabla de disponibilidad -->\r\n <div class=\"disponibilidad-detalle\">\r\n <div class=\"tabla-header\">\r\n <h3>\ud83d\udccb Pr\u00f3ximas Citas Disponibles<\/h3>\r\n <button class=\"btn-exportar\" onclick=\"exportarCSV()\">\ud83d\udce5 Exportar CSV<\/button>\r\n <\/div>\r\n <div class=\"tabla-wrapper\">\r\n <table class=\"tabla-disponibilidad\">\r\n <thead>\r\n <tr>\r\n <th>Fecha<\/th>\r\n <th>Hora<\/th>\r\n <th>Doctor<\/th>\r\n <th>Especialidad<\/th>\r\n <th>Videollamada<\/th>\r\n <th>Estado<\/th>\r\n <th>Acci\u00f3n<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"tabla-citas\"><\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ CONFIGURACI\u00d3N - URL CORRECTA DE GOOGLE APPS SCRIPT\r\n const SCRIPT_URL = 'https:\/\/script.google.com\/macros\/s\/AKfycbwi3Det-vOV190T7sTi1B8MeMxrhLbOolJ0vc8UgndPJtwQ9C0WoePvptYEHqvX8mrk\/exec';\r\n const SPREADSHEET_ID = '1jQ_L4TfklodmREUTqtU-fiGqIL5_cI-tTNmSxwW_pWE';\r\n \r\n \/\/ Usuario actual (simulado)\r\n const USUARIO_ACTUAL = {\r\n nombre: 'Juan P\u00e9rez',\r\n correo: 'juan@ejemplo.com',\r\n documento: '123456789'\r\n };\r\n\r\n \/\/ Variables globales\r\n let vistaActual = 'mes';\r\n let fechaActual = new Date();\r\n let citas = [];\r\n let doctores = [\r\n { nombre: 'Dr. Juan D\u00edaz', especialidad: 'Director M\u00e9dico' },\r\n { nombre: 'Dr. Garc\u00eda', especialidad: 'Cardiolog\u00eda' },\r\n { nombre: 'Dra. Mart\u00ednez', especialidad: 'Pediatr\u00eda' },\r\n { nombre: 'Dr. Rodr\u00edguez', especialidad: 'Neurolog\u00eda' }\r\n ];\r\n let horasDisponibles = ['09:00', '10:00', '11:00', '12:00', '14:00', '15:00', '16:00', '17:00'];\r\n\r\n \/\/ Cargar citas guardadas al iniciar\r\n async function cargarCitasGuardadas() {\r\n try {\r\n const response = await fetch(SCRIPT_URL + '?action=getCitas', {\r\n method: 'GET',\r\n mode: 'no-cors'\r\n });\r\n inicializarCitas();\r\n } catch (error) {\r\n console.log('Usando datos de ejemplo');\r\n inicializarCitas();\r\n }\r\n }\r\n\r\n \/\/ Inicializar citas de ejemplo\r\n function inicializarCitas() {\r\n const citasEjemplo = [];\r\n const hoy = new Date();\r\n \r\n for (let i = 0; i < 60; i++) {\r\n const fecha = new Date(hoy);\r\n fecha.setDate(hoy.getDate() + i);\r\n \r\n if (fecha.getDay() >= 1 && fecha.getDay() <= 5) {\r\n const fechaStr = formatearFecha(fecha);\r\n \r\n doctores.forEach(doctor => {\r\n horasDisponibles.forEach(hora => {\r\n if (Math.random() > 0.7) {\r\n const linkJitsi = generarLinkJitsi(doctor.nombre, fechaStr, hora);\r\n const estado = Math.random() > 0.3 ? 'disponible' : 'reservado';\r\n \r\n citasEjemplo.push({\r\n id: `cita-${i}-${doctor.nombre}-${hora}`,\r\n fecha: fechaStr,\r\n hora: hora,\r\n doctor: doctor.nombre,\r\n especialidad: doctor.especialidad,\r\n estado: estado,\r\n linkMeet: linkJitsi,\r\n paciente: estado === 'reservado' ? {\r\n nombre: 'Paciente Ejemplo',\r\n correo: 'paciente@email.com',\r\n documento: '123456789'\r\n } : null\r\n });\r\n }\r\n });\r\n });\r\n }\r\n }\r\n \r\n \/\/ Agregar citas espec\u00edficas para hoy (como en la imagen)\r\n const hoyStr = formatearFecha(hoy);\r\n \r\n \/\/ Cita de las 9:00 - Dr. Garc\u00eda (Reservado)\r\n citasEjemplo.push({\r\n id: 'cita-hoy-1',\r\n fecha: hoyStr,\r\n hora: '09:00',\r\n doctor: 'Dr. Garc\u00eda',\r\n especialidad: 'Cardiolog\u00eda',\r\n estado: 'reservado',\r\n linkMeet: generarLinkJitsi('Dr. Garc\u00eda', hoyStr, '09:00'),\r\n paciente: {\r\n nombre: 'Carlos L\u00f3pez',\r\n correo: 'carlos@email.com',\r\n documento: '987654321'\r\n }\r\n });\r\n \r\n \/\/ Cita de las 10:00 - Dr. Rodr\u00edguez (Disponible)\r\n citasEjemplo.push({\r\n id: 'cita-hoy-2',\r\n fecha: hoyStr,\r\n hora: '10:00',\r\n doctor: 'Dr. Rodr\u00edguez',\r\n especialidad: 'Neurolog\u00eda',\r\n estado: 'disponible',\r\n linkMeet: generarLinkJitsi('Dr. Rodr\u00edguez', hoyStr, '10:00'),\r\n paciente: null\r\n });\r\n \r\n citas = citasEjemplo;\r\n actualizarVista();\r\n }\r\n\r\n \/\/ Funciones de utilidad\r\n function formatearFecha(fecha) {\r\n const a\u00f1o = fecha.getFullYear();\r\n const mes = String(fecha.getMonth() + 1).padStart(2, '0');\r\n const dia = String(fecha.getDate()).padStart(2, '0');\r\n return `${a\u00f1o}-${mes}-${dia}`;\r\n }\r\n\r\n function formatearFechaLegible(fechaStr) {\r\n const fecha = new Date(fechaStr + 'T12:00:00');\r\n return fecha.toLocaleDateString('es-ES', { \r\n weekday: 'long', \r\n day: '2-digit', \r\n month: 'long', \r\n year: 'numeric' \r\n });\r\n }\r\n\r\n function generarLinkJitsi(doctor, fecha, hora) {\r\n const doctorLimpio = doctor.replace(\/[^a-zA-Z0-9]\/g, '');\r\n const fechaLimpia = fecha.replace(\/-\/g, '');\r\n const horaLimpia = hora.replace(':', '');\r\n return `https:\/\/meet.jit.si\/ROHI-${doctorLimpio}-${fechaLimpia}-${horaLimpia}`;\r\n }\r\n\r\n function esMiCita(cita) {\r\n return cita.paciente && cita.paciente.correo === USUARIO_ACTUAL.correo;\r\n }\r\n\r\n \/\/ Actualizar hora\r\n function actualizarHora() {\r\n const ahora = new Date();\r\n document.getElementById('fecha-actual').textContent = \r\n ahora.toLocaleDateString('es-CO', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });\r\n document.getElementById('hora-actual-reloj').textContent = \r\n ahora.toLocaleTimeString('es-CO');\r\n }\r\n\r\n \/\/ Cambiar vista\r\n function cambiarVista(vista) {\r\n vistaActual = vista;\r\n document.querySelectorAll('.btn-vista').forEach(btn => btn.classList.remove('active'));\r\n event.target.classList.add('active');\r\n actualizarVista();\r\n }\r\n\r\n \/\/ Navegaci\u00f3n\r\n function navegar(direccion) {\r\n if (vistaActual === 'mes') {\r\n fechaActual.setMonth(fechaActual.getMonth() + direccion);\r\n } else if (vistaActual === 'semana') {\r\n fechaActual.setDate(fechaActual.getDate() + (direccion * 7));\r\n } else {\r\n fechaActual.setDate(fechaActual.getDate() + direccion);\r\n }\r\n actualizarVista();\r\n }\r\n\r\n function irAHoy() {\r\n fechaActual = new Date();\r\n actualizarVista();\r\n }\r\n\r\n \/\/ Actualizar estad\u00edsticas\r\n function actualizarEstadisticas() {\r\n const hoyStr = formatearFecha(new Date());\r\n const citasHoy = citas.filter(c => c.fecha === hoyStr);\r\n const misCitas = citas.filter(c => esMiCita(c));\r\n \r\n document.getElementById('citas-hoy').textContent = citasHoy.length;\r\n document.getElementById('disponibles-hoy').textContent = citasHoy.filter(c => c.estado === 'disponible').length;\r\n document.getElementById('total-citas').textContent = citas.length;\r\n document.getElementById('count-disponible').textContent = citas.filter(c => c.estado === 'disponible').length;\r\n document.getElementById('count-reservado').textContent = citas.filter(c => c.estado === 'reservado').length;\r\n document.getElementById('count-mis-citas').textContent = misCitas.length;\r\n document.getElementById('total-doctores').textContent = doctores.length;\r\n }\r\n\r\n \/\/ Renderizar seg\u00fan vista\r\n function actualizarVista() {\r\n const titulo = document.getElementById('titulo-fecha');\r\n \r\n if (vistaActual === 'mes') {\r\n titulo.textContent = fechaActual.toLocaleDateString('es-ES', { month: 'long', year: 'numeric' });\r\n renderizarVistaMes();\r\n } else if (vistaActual === 'semana') {\r\n const inicioSemana = new Date(fechaActual);\r\n inicioSemana.setDate(fechaActual.getDate() - fechaActual.getDay() + 1);\r\n const finSemana = new Date(inicioSemana);\r\n finSemana.setDate(inicioSemana.getDate() + 6);\r\n titulo.textContent = `Semana del ${inicioSemana.getDate()} al ${finSemana.getDate()} de ${fechaActual.toLocaleDateString('es-ES', { month: 'long', year: 'numeric' })}`;\r\n renderizarVistaSemana();\r\n } else {\r\n titulo.textContent = formatearFechaLegible(formatearFecha(fechaActual));\r\n renderizarVistaDia();\r\n }\r\n \r\n actualizarEstadisticas();\r\n actualizarTablaDisponibilidad();\r\n }\r\n\r\n \/\/ VISTA MES - Versi\u00f3n con links\r\n function renderizarVistaMes() {\r\n const contenedor = document.getElementById('calendario-contenedor');\r\n const a\u00f1o = fechaActual.getFullYear();\r\n const mes = fechaActual.getMonth();\r\n \r\n let html = '<div class=\"vista-mes\">';\r\n \r\n \/\/ D\u00edas de la semana\r\n const diasSemana = ['Lunes', 'Martes', 'Mi\u00e9rcoles', 'Jueves', 'Viernes', 'S\u00e1bado', 'Domingo'];\r\n diasSemana.forEach(dia => {\r\n html += `<div class=\"dia-semana\">${dia}<\/div>`;\r\n });\r\n \r\n \/\/ Primer d\u00eda del mes\r\n const primerDia = new Date(a\u00f1o, mes, 1);\r\n let diaSemanaInicio = primerDia.getDay();\r\n let offset = diaSemanaInicio === 0 ? 6 : diaSemanaInicio - 1;\r\n \r\n \/\/ D\u00edas del mes anterior\r\n const diasMesAnterior = new Date(a\u00f1o, mes, 0).getDate();\r\n for (let i = offset - 1; i >= 0; i--) {\r\n const dia = diasMesAnterior - i;\r\n html += generarCeldaDia(dia, true);\r\n }\r\n \r\n \/\/ D\u00edas del mes actual\r\n const ultimoDia = new Date(a\u00f1o, mes + 1, 0).getDate();\r\n const hoyStr = formatearFecha(new Date());\r\n \r\n for (let dia = 1; dia <= ultimoDia; dia++) {\r\n const fechaStr = `${a\u00f1o}-${String(mes + 1).padStart(2, '0')}-${String(dia).padStart(2, '0')}`;\r\n const esHoy = fechaStr === hoyStr;\r\n html += generarCeldaDia(dia, false, fechaStr, esHoy);\r\n }\r\n \r\n \/\/ D\u00edas del mes siguiente\r\n const totalCeldas = 42;\r\n const celdasUsadas = offset + ultimoDia;\r\n const celdasRestantes = totalCeldas - celdasUsadas;\r\n \r\n for (let dia = 1; dia <= celdasRestantes; dia++) {\r\n html += generarCeldaDia(dia, true);\r\n }\r\n \r\n html += '<\/div>';\r\n contenedor.innerHTML = html;\r\n }\r\n\r\n function generarCeldaDia(dia, esOtroMes, fechaStr = '', esHoy = false) {\r\n let citasDelDia = [];\r\n if (!esOtroMes && fechaStr) {\r\n citasDelDia = citas.filter(c => c.fecha === fechaStr);\r\n }\r\n \r\n const disponibles = citasDelDia.filter(c => c.estado === 'disponible');\r\n const reservadas = citasDelDia.filter(c => c.estado === 'reservado');\r\n const misCitas = citasDelDia.filter(c => esMiCita(c));\r\n \r\n let clases = 'dia-celda';\r\n if (esOtroMes) clases += ' otro-mes';\r\n if (esHoy) clases += ' hoy';\r\n \r\n let onclickAttr = fechaStr ? `onclick=\"seleccionarFecha('${fechaStr}')\"` : '';\r\n \r\n let html = `<div class=\"${clases}\" ${onclickAttr}>`;\r\n html += `<div class=\"numero-dia\">${dia}<\/div>`;\r\n \r\n \/\/ Mostrar citas disponibles\r\n disponibles.slice(0, 2).forEach(cita => {\r\n const citaJSON = JSON.stringify(cita).replace(\/'\/g, \"\\\\'\");\r\n html += `<div class=\"cita-badge disponible\" onclick=\"event.stopPropagation(); abrirModal(${citaJSON})\" style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n <div style=\"display: flex; align-items: center; gap: 5px; flex: 1;\">\r\n <span>\ud83d\udd50 ${cita.hora} - ${cita.doctor}<\/span>\r\n <\/div>\r\n <a href=\"${cita.linkMeet}\" target=\"_blank\" class=\"link-cita\" onclick=\"event.stopPropagation()\">\ud83d\udd17<\/a>\r\n <\/div>`;\r\n });\r\n \r\n \/\/ Mostrar mis citas\r\n misCitas.slice(0, 1).forEach(cita => {\r\n const citaJSON = JSON.stringify(cita).replace(\/'\/g, \"\\\\'\");\r\n html += `<div class=\"cita-badge mio\" onclick=\"event.stopPropagation(); verCita(${citaJSON})\" style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n <div style=\"display: flex; align-items: center; gap: 5px; flex: 1;\">\r\n <span>\ud83d\udc64 Mi cita - ${cita.hora}<\/span>\r\n <\/div>\r\n <a href=\"${cita.linkMeet}\" target=\"_blank\" class=\"link-cita\" onclick=\"event.stopPropagation()\">\ud83d\udd17<\/a>\r\n <\/div>`;\r\n });\r\n \r\n \/\/ Mostrar citas reservadas (no disponibles)\r\n reservadas.slice(0, 1).forEach(cita => {\r\n if (!esMiCita(cita)) {\r\n const citaJSON = JSON.stringify(cita).replace(\/'\/g, \"\\\\'\");\r\n html += `<div class=\"cita-badge reservado\" onclick=\"event.stopPropagation(); verCita(${citaJSON})\" style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n <div style=\"display: flex; align-items: center; gap: 5px; flex: 1;\">\r\n <span>\ud83d\udd34 ${cita.hora} - ${cita.doctor}<\/span>\r\n <\/div>\r\n <a href=\"${cita.linkMeet}\" target=\"_blank\" class=\"link-cita\" onclick=\"event.stopPropagation()\">\ud83d\udd17<\/a>\r\n <\/div>`;\r\n }\r\n });\r\n \r\n if (disponibles.length + misCitas.length + reservadas.length > 3) {\r\n const total = disponibles.length + misCitas.length + reservadas.length;\r\n html += `<div style=\"font-size: 11px; color: var(--primary); margin-top: 5px;\">+${total - 3} m\u00e1s<\/div>`;\r\n }\r\n \r\n html += '<\/div>';\r\n return html;\r\n }\r\n\r\n \/\/ VISTA SEMANA - Versi\u00f3n con links\r\n function renderizarVistaSemana() {\r\n const contenedor = document.getElementById('calendario-contenedor');\r\n const inicioSemana = new Date(fechaActual);\r\n inicioSemana.setDate(fechaActual.getDate() - fechaActual.getDay() + 1);\r\n \r\n let html = '<div class=\"vista-semana\">';\r\n \r\n \/\/ Esquina superior izquierda\r\n html += '<div class=\"hora-label\">Hora<\/div>';\r\n \r\n \/\/ D\u00edas de la semana\r\n const diasSemana = ['Lunes', 'Martes', 'Mi\u00e9rcoles', 'Jueves', 'Viernes', 'S\u00e1bado', 'Domingo'];\r\n for (let i = 0; i < 7; i++) {\r\n const dia = new Date(inicioSemana);\r\n dia.setDate(inicioSemana.getDate() + i);\r\n html += `<div class=\"dia-semana\">${diasSemana[i]}<br><small>${dia.getDate()}<\/small><\/div>`;\r\n }\r\n \r\n \/\/ Horas\r\n horasDisponibles.forEach(hora => {\r\n html += `<div class=\"hora-label\">${hora}<\/div>`;\r\n \r\n for (let i = 0; i < 7; i++) {\r\n const dia = new Date(inicioSemana);\r\n dia.setDate(inicioSemana.getDate() + i);\r\n const fechaStr = formatearFecha(dia);\r\n \r\n const citasEnHora = citas.filter(c => c.fecha === fechaStr && c.hora === hora);\r\n \r\n html += `<div class=\"celda-hora\" onclick=\"seleccionarHorario('${fechaStr}', '${hora}')\">`;\r\n \r\n citasEnHora.forEach(cita => {\r\n let clase = 'evento-semana';\r\n if (cita.estado === 'reservado') clase += ' reservado';\r\n if (esMiCita(cita)) clase += ' mio';\r\n \r\n const citaJSON = JSON.stringify(cita).replace(\/'\/g, \"\\\\'\");\r\n html += `<div class=\"${clase}\" onclick=\"event.stopPropagation(); verCita(${citaJSON})\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n <span>${cita.doctor}<\/span>\r\n <a href=\"${cita.linkMeet}\" target=\"_blank\" class=\"link-cita\" style=\"font-size: 9px;\" onclick=\"event.stopPropagation()\">\ud83d\udd17<\/a>\r\n <\/div>\r\n <div style=\"display: flex; justify-content: space-between; margin-top: 2px;\">\r\n <small>${cita.estado === 'disponible' ? '\ud83d\udfe2 Disponible' : '\ud83d\udd34 Reservado'}<\/small>\r\n <\/div>\r\n <\/div>`;\r\n });\r\n \r\n html += '<\/div>';\r\n }\r\n });\r\n \r\n html += '<\/div>';\r\n contenedor.innerHTML = html;\r\n }\r\n\r\n \/\/ VISTA D\u00cdA - Versi\u00f3n con links (como en la imagen)\r\n function renderizarVistaDia() {\r\n const contenedor = document.getElementById('calendario-contenedor');\r\n const fechaStr = formatearFecha(fechaActual);\r\n \r\n let html = '<div class=\"vista-dia\">';\r\n \r\n \/\/ L\u00ednea de tiempo\r\n html += '<div class=\"linea-tiempo\">';\r\n horasDisponibles.forEach(hora => {\r\n html += `<div class=\"hora-tiempo\">${hora}<\/div>`;\r\n });\r\n html += '<\/div>';\r\n \r\n \/\/ Eventos del d\u00eda\r\n html += '<div class=\"columna-eventos-dia\" style=\"position: relative;\">';\r\n \r\n horasDisponibles.forEach((hora, index) => {\r\n const citasEnHora = citas.filter(c => c.fecha === fechaStr && c.hora === hora);\r\n \r\n html += `<div class=\"bloque-hora-dia\" onclick=\"seleccionarHorario('${fechaStr}', '${hora}')\">`;\r\n \r\n citasEnHora.forEach(cita => {\r\n let clase = 'evento-dia';\r\n if (cita.estado === 'reservado') clase += ' reservado';\r\n if (esMiCita(cita)) clase += ' mio';\r\n \r\n const top = index * 60;\r\n const citaJSON = JSON.stringify(cita).replace(\/'\/g, \"\\\\'\");\r\n html += `<div class=\"${clase}\" style=\"top: ${top}px;\" onclick=\"event.stopPropagation(); verCita(${citaJSON})\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px;\">\r\n <strong>${cita.hora}<\/strong>\r\n <a href=\"${cita.linkMeet}\" target=\"_blank\" class=\"link-cita\" onclick=\"event.stopPropagation()\">\ud83d\udd17 Videollamada<\/a>\r\n <\/div>\r\n <div style=\"font-weight: 500; margin-bottom: 3px;\">${cita.doctor}<\/div>\r\n <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n <small>${cita.estado === 'disponible' ? '\ud83d\udfe2 Disponible' : '\ud83d\udd34 Reservado'}<\/small>\r\n <small style=\"background: rgba(255,255,255,0.2); padding: 2px 8px; border-radius: 12px; font-size: 9px;\">\r\n ${cita.linkMeet.split('\/').pop()}\r\n <\/small>\r\n <\/div>\r\n <\/div>`;\r\n });\r\n \r\n html += '<\/div>';\r\n });\r\n \r\n html += '<\/div><\/div>';\r\n contenedor.innerHTML = html;\r\n }\r\n\r\n \/\/ Acciones del calendario\r\n function seleccionarFecha(fechaStr) {\r\n if (!fechaStr) return;\r\n fechaActual = new Date(fechaStr + 'T12:00:00');\r\n cambiarVista('dia');\r\n }\r\n\r\n function seleccionarHorario(fechaStr, hora) {\r\n const citaDisponible = citas.find(c => \r\n c.fecha === fechaStr && \r\n c.hora === hora && \r\n c.estado === 'disponible'\r\n );\r\n \r\n if (citaDisponible) {\r\n abrirModal(citaDisponible);\r\n } else {\r\n alert('Este horario no est\u00e1 disponible para reservar');\r\n }\r\n }\r\n\r\n function verCita(cita) {\r\n if (esMiCita(cita)) {\r\n alert(`\ud83d\udccb Detalle de tu cita:\\n\\nDoctor: ${cita.doctor}\\nFecha: ${cita.fecha}\\nHora: ${cita.hora}\\nLink: ${cita.linkMeet}`);\r\n } else if (cita.estado === 'disponible') {\r\n abrirModal(cita);\r\n } else {\r\n alert('Esta cita ya est\u00e1 reservada por otro paciente');\r\n }\r\n }\r\n\r\n \/\/ Modal\r\n function abrirModal(cita) {\r\n if (cita.estado !== 'disponible') {\r\n alert('Esta cita no est\u00e1 disponible para reservar');\r\n return;\r\n }\r\n \r\n document.getElementById('detalle-cita').innerHTML = `\r\n <div style=\"font-size: 20px; font-weight: bold; margin-bottom: 15px;\">\ud83c\udfe5 ROHI IPS<\/div>\r\n <div style=\"font-size: 18px; margin-bottom: 10px;\">\ud83d\udcc5 ${formatearFechaLegible(cita.fecha)}<\/div>\r\n <div style=\"font-size: 24px; font-weight: bold; margin-bottom: 15px;\">\u23f0 ${cita.hora}<\/div>\r\n <div style=\"font-size: 16px; margin-bottom: 5px;\">\ud83d\udc68\u200d\u2695\ufe0f ${cita.doctor}<\/div>\r\n <div style=\"font-size: 14px; margin-bottom: 20px;\">\ud83d\udccb ${cita.especialidad}<\/div>\r\n <div style=\"background: rgba(255,255,255,0.2); padding: 20px; border-radius: 15px;\">\r\n <div style=\"font-size: 12px; margin-bottom: 8px;\">\ud83d\udd17 LINK DE VIDELLAMADA:<\/div>\r\n <div style=\"font-size: 14px; word-break: break-all; font-family: monospace;\">${cita.linkMeet}<\/div>\r\n <a href=\"${cita.linkMeet}\" target=\"_blank\" style=\"display: inline-block; margin-top: 10px; background: white; color: var(--primary); padding: 8px 15px; border-radius: 20px; text-decoration: none; font-weight: 600;\">\ud83d\udd17 Ir a la videollamada<\/a>\r\n <\/div>\r\n `;\r\n \r\n document.getElementById('fecha-reserva').value = cita.fecha;\r\n document.getElementById('hora-reserva').value = cita.hora;\r\n document.getElementById('doctor-reserva').value = cita.doctor;\r\n document.getElementById('especialidad-reserva').value = cita.especialidad;\r\n document.getElementById('link-meet-reserva').value = cita.linkMeet;\r\n document.getElementById('estado-reserva').value = cita.estado;\r\n \r\n document.getElementById('modal-reserva').style.display = 'block';\r\n }\r\n\r\n function cerrarModal() {\r\n document.getElementById('modal-reserva').style.display = 'none';\r\n document.getElementById('formulario-reserva').reset();\r\n }\r\n\r\n function mostrarNotificacion(mensaje, tipo = 'success') {\r\n const notificacion = document.createElement('div');\r\n notificacion.className = 'email-notification';\r\n notificacion.style.borderLeftColor = tipo === 'success' ? '#4caf50' : '#f44336';\r\n notificacion.innerHTML = `\r\n <span style=\"font-size: 24px;\">${tipo === 'success' ? '\u2705' : '\u26a0\ufe0f'}<\/span>\r\n <span>${mensaje}<\/span>\r\n `;\r\n \r\n document.body.appendChild(notificacion);\r\n setTimeout(() => notificacion.remove(), 5000);\r\n }\r\n\r\n \/\/ Guardar reserva\r\n async function guardarReserva(event) {\r\n event.preventDefault();\r\n \r\n const datosReserva = {\r\n id: `cita-${Date.now()}`,\r\n fecha: document.getElementById('fecha-reserva').value,\r\n hora: document.getElementById('hora-reserva').value,\r\n doctor: document.getElementById('doctor-reserva').value,\r\n especialidad: document.getElementById('especialidad-reserva').value,\r\n linkMeet: document.getElementById('link-meet-reserva').value,\r\n nombre: document.getElementById('nombre').value,\r\n correo: document.getElementById('correo').value,\r\n documento: document.getElementById('documento').value,\r\n telefono: document.getElementById('telefono').value || '',\r\n motivo: document.getElementById('motivo').value || '',\r\n estado: 'reservado'\r\n };\r\n\r\n if (!datosReserva.nombre || !datosReserva.correo || !datosReserva.documento) {\r\n alert('Por favor completa todos los campos obligatorios');\r\n return;\r\n }\r\n\r\n if (!datosReserva.correo.includes('@') || !datosReserva.correo.includes('.')) {\r\n alert('Por favor ingresa un correo electr\u00f3nico v\u00e1lido');\r\n return;\r\n }\r\n\r\n try {\r\n const btnConfirmar = document.querySelector('.btn-confirmar');\r\n btnConfirmar.innerHTML = '\u23f3 Enviando a Google Sheets...';\r\n btnConfirmar.disabled = true;\r\n\r\n mostrarNotificacion('\ud83d\udce4 Guardando datos en Google Sheets...');\r\n\r\n await fetch(SCRIPT_URL, {\r\n method: 'POST',\r\n mode: 'no-cors',\r\n headers: {\r\n 'Content-Type': 'application\/json',\r\n },\r\n body: JSON.stringify(datosReserva)\r\n });\r\n\r\n const citaIndex = citas.findIndex(c => \r\n c.fecha === datosReserva.fecha && \r\n c.hora === datosReserva.hora && \r\n c.doctor === datosReserva.doctor\r\n );\r\n \r\n if (citaIndex !== -1) {\r\n citas[citaIndex] = {\r\n ...citas[citaIndex],\r\n estado: 'reservado',\r\n paciente: {\r\n nombre: datosReserva.nombre,\r\n correo: datosReserva.correo,\r\n documento: datosReserva.documento\r\n },\r\n esMia: true\r\n };\r\n }\r\n\r\n mostrarNotificacion('\u2705 Datos guardados en Google Sheets correctamente');\r\n \r\n alert(`\u2705 \u00a1RESERVA CONFIRMADA!\\n\\n\ud83d\udccb Tus datos han sido guardados en Google Sheets.\\n\\nRecibir\u00e1s un correo de confirmaci\u00f3n en:\\n${datosReserva.correo}\\n\\n\ud83d\udcc5 Fecha: ${datosReserva.fecha}\\n\u23f0 Hora: ${datosReserva.hora}\\n\ud83d\udc68\u200d\u2695\ufe0f Doctor: ${datosReserva.doctor}\\n\\n\ud83d\udd17 Link: ${datosReserva.linkMeet}`);\r\n \r\n cerrarModal();\r\n actualizarVista();\r\n actualizarTablaDisponibilidad();\r\n document.getElementById('formulario-reserva').reset();\r\n\r\n } catch (error) {\r\n console.error('Error:', error);\r\n mostrarNotificacion('\u26a0\ufe0f Error de conexi\u00f3n, guardando localmente...', 'error');\r\n guardarRespaldoLocal(datosReserva);\r\n \r\n } finally {\r\n const btnConfirmar = document.querySelector('.btn-confirmar');\r\n btnConfirmar.innerHTML = '\u2705 Confirmar Reserva';\r\n btnConfirmar.disabled = false;\r\n }\r\n }\r\n\r\n \/\/ Funci\u00f3n de respaldo local\r\n function guardarRespaldoLocal(datos) {\r\n try {\r\n const respaldos = JSON.parse(localStorage.getItem('reservasPendientes') || '[]');\r\n respaldos.push({\r\n ...datos,\r\n timestamp: new Date().toISOString(),\r\n sincronizado: false\r\n });\r\n localStorage.setItem('reservasPendientes', JSON.stringify(respaldos));\r\n \r\n const citaIndex = citas.findIndex(c => \r\n c.fecha === datos.fecha && \r\n c.hora === datos.hora && \r\n c.doctor === datos.doctor\r\n );\r\n \r\n if (citaIndex !== -1) {\r\n citas[citaIndex] = {\r\n ...citas[citaIndex],\r\n estado: 'reservado',\r\n paciente: {\r\n nombre: datos.nombre,\r\n correo: datos.correo,\r\n documento: datos.documento\r\n },\r\n esMia: true\r\n };\r\n }\r\n \r\n alert('\ud83d\udcdd Cita guardada LOCALMENTE. Se sincronizar\u00e1 autom\u00e1ticamente.\\n\\n\u2705 Tu cita est\u00e1 confirmada.');\r\n \r\n cerrarModal();\r\n actualizarVista();\r\n actualizarTablaDisponibilidad();\r\n \r\n mostrarNotificacion('\ud83d\udcbe Respaldo local guardado', 'success');\r\n \r\n } catch (e) {\r\n console.error('Error guardando respaldo:', e);\r\n alert('Error guardando la reserva. Por favor intenta de nuevo.');\r\n }\r\n }\r\n\r\n \/\/ Filtros\r\n function aplicarFiltros() {\r\n actualizarTablaDisponibilidad();\r\n }\r\n\r\n function limpiarFiltros() {\r\n document.getElementById('filtro-doctor').value = 'todos';\r\n document.getElementById('fecha-filtro').value = '';\r\n actualizarTablaDisponibilidad();\r\n }\r\n\r\n \/\/ Tabla de disponibilidad\r\n function actualizarTablaDisponibilidad() {\r\n const filtroDoctor = document.getElementById('filtro-doctor').value;\r\n const filtroFecha = document.getElementById('fecha-filtro').value;\r\n \r\n let citasFiltradas = citas.filter(c => c.estado === 'disponible');\r\n \r\n if (filtroDoctor !== 'todos') {\r\n citasFiltradas = citasFiltradas.filter(c => c.doctor === filtroDoctor);\r\n }\r\n \r\n if (filtroFecha) {\r\n citasFiltradas = citasFiltradas.filter(c => c.fecha === filtroFecha);\r\n }\r\n \r\n citasFiltradas.sort((a, b) => {\r\n if (a.fecha === b.fecha) return a.hora.localeCompare(b.hora);\r\n return a.fecha.localeCompare(b.fecha);\r\n });\r\n \r\n const tbody = document.getElementById('tabla-citas');\r\n tbody.innerHTML = '';\r\n \r\n if (citasFiltradas.length === 0) {\r\n tbody.innerHTML = '<tr><td colspan=\"7\" style=\"text-align: center; padding: 40px;\">\ud83d\udcc5 No hay citas disponibles<\/td><\/tr>';\r\n } else {\r\n citasFiltradas.slice(0, 10).forEach(cita => {\r\n const fechaObj = new Date(cita.fecha + 'T12:00:00');\r\n const fechaFormateada = fechaObj.toLocaleDateString('es-ES', { \r\n day: '2-digit', \r\n month: '2-digit', \r\n year: 'numeric' \r\n });\r\n \r\n const citaJSON = JSON.stringify(cita).replace(\/'\/g, \"\\\\'\");\r\n \r\n const fila = document.createElement('tr');\r\n fila.innerHTML = `\r\n <td><strong>${fechaFormateada}<\/strong><\/td>\r\n <td><span style=\"background: #e3f2fd; padding: 5px 10px; border-radius: 20px;\">${cita.hora}<\/span><\/td>\r\n <td>${cita.doctor}<\/td>\r\n <td>${cita.especialidad}<\/td>\r\n <td>\r\n <a href=\"${cita.linkMeet}\" target=\"_blank\" class=\"link-meet\" style=\"display: flex; align-items: center; gap: 5px;\">\r\n \ud83d\udd17 <span style=\"max-width: 100px; overflow: hidden; text-overflow: ellipsis;\">${cita.linkMeet}<\/span>\r\n <\/a>\r\n <\/td>\r\n <td><span class=\"badge-estado badge-disponible\">\ud83d\udfe2 DISPONIBLE<\/span><\/td>\r\n <td><button class=\"btn-reservar\" onclick='abrirModal(${citaJSON})'>Reservar<\/button><\/td>\r\n `;\r\n \r\n tbody.appendChild(fila);\r\n });\r\n }\r\n }\r\n\r\n \/\/ Exportar CSV\r\n function exportarCSV() {\r\n const citasExport = citas.filter(c => c.estado === 'disponible').slice(0, 50);\r\n let csv = 'Fecha,Hora,Doctor,Especialidad,Link,Estado\\n';\r\n \r\n citasExport.forEach(c => {\r\n csv += `${c.fecha},${c.hora},${c.doctor},${c.especialidad},${c.linkMeet},${c.estado}\\n`;\r\n });\r\n \r\n const blob = new Blob([csv], { type: 'text\/csv' });\r\n const url = window.URL.createObjectURL(blob);\r\n const a = document.createElement('a');\r\n a.href = url;\r\n a.download = `citas_${formatearFecha(new Date())}.csv`;\r\n a.click();\r\n }\r\n\r\n \/\/ Sincronizar respaldos pendientes\r\n async function sincronizarReservasPendientes() {\r\n const respaldos = JSON.parse(localStorage.getItem('reservasPendientes') || '[]');\r\n const pendientes = respaldos.filter(r => !r.sincronizado);\r\n \r\n for (const reserva of pendientes) {\r\n try {\r\n await fetch(SCRIPT_URL, {\r\n method: 'POST',\r\n mode: 'no-cors',\r\n headers: { 'Content-Type': 'application\/json' },\r\n body: JSON.stringify(reserva)\r\n });\r\n reserva.sincronizado = true;\r\n } catch (e) {\r\n console.log('Error sincronizando reserva pendiente');\r\n }\r\n }\r\n \r\n localStorage.setItem('reservasPendientes', JSON.stringify(respaldos));\r\n }\r\n\r\n \/\/ Inicializaci\u00f3n\r\n setInterval(actualizarHora, 1000);\r\n actualizarHora();\r\n cargarCitasGuardadas();\r\n \r\n \/\/ Intentar sincronizar reservas pendientes cada 30 segundos\r\n setInterval(sincronizarReservasPendientes, 30000);\r\n\r\n \/\/ Cerrar modal al hacer click fuera\r\n window.onclick = function(event) {\r\n const modal = document.getElementById('modal-reserva');\r\n if (event.target == modal) cerrarModal();\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>ROHI IPS – Agenda M\u00e9dica Profesional \u2695\ufe0f ROHI IPS SALUD CON TECNOLOG\u00cdA \u23f0 \ud83d\udcc5 MES \ud83d\udcc6 SEMANA \ud83d\udccb D\u00cdA \u2190 […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"content-type":"","site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1978","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>TELEMEDICINA - ROHI IPS SAS<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rohiips.com\/index.php\/telemedicina\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"TELEMEDICINA - ROHI IPS SAS\" \/>\n<meta property=\"og:description\" content=\"ROHI IPS – Agenda M\u00e9dica Profesional \u2695\ufe0f ROHI IPS SALUD CON TECNOLOG\u00cdA \u23f0 \ud83d\udcc5 MES \ud83d\udcc6 SEMANA \ud83d\udccb D\u00cdA \u2190 […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rohiips.com\/index.php\/telemedicina\/\" \/>\n<meta property=\"og:site_name\" content=\"ROHI IPS SAS\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-02T17:05:51+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/rohiips.com\/index.php\/telemedicina\/\",\"url\":\"https:\/\/rohiips.com\/index.php\/telemedicina\/\",\"name\":\"TELEMEDICINA - ROHI IPS SAS\",\"isPartOf\":{\"@id\":\"https:\/\/rohiips.com\/#website\"},\"datePublished\":\"2026-02-26T20:06:38+00:00\",\"dateModified\":\"2026-03-02T17:05:51+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/rohiips.com\/index.php\/telemedicina\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/rohiips.com\/index.php\/telemedicina\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/rohiips.com\/index.php\/telemedicina\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/rohiips.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"TELEMEDICINA\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/rohiips.com\/#website\",\"url\":\"https:\/\/rohiips.com\/\",\"name\":\"ROHI IPS SAS\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/rohiips.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/rohiips.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/rohiips.com\/#organization\",\"name\":\"ROHI IPS SAS\",\"url\":\"https:\/\/rohiips.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/rohiips.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/rohiips.com\/wp-content\/uploads\/2021\/10\/Logo.png\",\"contentUrl\":\"https:\/\/rohiips.com\/wp-content\/uploads\/2021\/10\/Logo.png\",\"width\":614,\"height\":287,\"caption\":\"ROHI IPS SAS\"},\"image\":{\"@id\":\"https:\/\/rohiips.com\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"TELEMEDICINA - ROHI IPS SAS","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rohiips.com\/index.php\/telemedicina\/","og_locale":"es_ES","og_type":"article","og_title":"TELEMEDICINA - ROHI IPS SAS","og_description":"ROHI IPS – Agenda M\u00e9dica Profesional \u2695\ufe0f ROHI IPS SALUD CON TECNOLOG\u00cdA \u23f0 \ud83d\udcc5 MES \ud83d\udcc6 SEMANA \ud83d\udccb D\u00cdA \u2190 […]","og_url":"https:\/\/rohiips.com\/index.php\/telemedicina\/","og_site_name":"ROHI IPS SAS","article_modified_time":"2026-03-02T17:05:51+00:00","twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/rohiips.com\/index.php\/telemedicina\/","url":"https:\/\/rohiips.com\/index.php\/telemedicina\/","name":"TELEMEDICINA - ROHI IPS SAS","isPartOf":{"@id":"https:\/\/rohiips.com\/#website"},"datePublished":"2026-02-26T20:06:38+00:00","dateModified":"2026-03-02T17:05:51+00:00","breadcrumb":{"@id":"https:\/\/rohiips.com\/index.php\/telemedicina\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rohiips.com\/index.php\/telemedicina\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/rohiips.com\/index.php\/telemedicina\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/rohiips.com\/"},{"@type":"ListItem","position":2,"name":"TELEMEDICINA"}]},{"@type":"WebSite","@id":"https:\/\/rohiips.com\/#website","url":"https:\/\/rohiips.com\/","name":"ROHI IPS SAS","description":"","publisher":{"@id":"https:\/\/rohiips.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rohiips.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/rohiips.com\/#organization","name":"ROHI IPS SAS","url":"https:\/\/rohiips.com\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/rohiips.com\/#\/schema\/logo\/image\/","url":"https:\/\/rohiips.com\/wp-content\/uploads\/2021\/10\/Logo.png","contentUrl":"https:\/\/rohiips.com\/wp-content\/uploads\/2021\/10\/Logo.png","width":614,"height":287,"caption":"ROHI IPS SAS"},"image":{"@id":"https:\/\/rohiips.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/rohiips.com\/index.php\/wp-json\/wp\/v2\/pages\/1978","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rohiips.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rohiips.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rohiips.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/rohiips.com\/index.php\/wp-json\/wp\/v2\/comments?post=1978"}],"version-history":[{"count":121,"href":"https:\/\/rohiips.com\/index.php\/wp-json\/wp\/v2\/pages\/1978\/revisions"}],"predecessor-version":[{"id":2108,"href":"https:\/\/rohiips.com\/index.php\/wp-json\/wp\/v2\/pages\/1978\/revisions\/2108"}],"wp:attachment":[{"href":"https:\/\/rohiips.com\/index.php\/wp-json\/wp\/v2\/media?parent=1978"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}