{"id":1551,"date":"2026-07-23T09:10:20","date_gmt":"2026-07-23T07:10:20","guid":{"rendered":"https:\/\/katiatupediatra.es\/?page_id=1551"},"modified":"2026-07-26T09:47:48","modified_gmt":"2026-07-26T07:47:48","slug":"consulta-online","status":"publish","type":"page","link":"https:\/\/katiatupediatra.es\/en\/consulta-online\/","title":{"rendered":"online consultation"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n\n \n \n Videoconsulta Pedi\u00e1trica - KatiaTuPediatra<\/title>\n\n <!-- Agora RTC SDK -->\n <script src=\"https:\/\/download.agora.io\/sdk\/release\/AgoraRTC_N-4.20.0.js\"><\/script>\n <!-- Protobuf.js para leer los subt\u00edtulos de Agora -->\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/protobufjs@7.2.4\/dist\/protobuf.min.js\"><\/script>\n\n <!-- Google Material Symbols -->\n <link rel=\"stylesheet\"\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block\" \/>\n\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Quicksand:wght@400;500;600;700&display=swap');\n\n #katia-pediatra,\n #katia-pediatra * {\n box-sizing: border-box;\n font-family: 'Outfit', system-ui, -apple-system, sans-serif;\n }\n\n #katia-pediatra h1,\n #katia-pediatra h2,\n #katia-pediatra h3,\n #katia-pediatra h4,\n #katia-pediatra .heading-font {\n font-family: 'Quicksand', system-ui, -apple-system, sans-serif;\n }\n\n .material-symbols-outlined {\n font-family: 'Material Symbols Outlined' !important;\n font-weight: normal;\n font-style: normal;\n display: inline-block;\n line-height: 1;\n text-transform: none;\n letter-spacing: normal;\n word-wrap: normal;\n white-space: nowrap;\n direction: ltr;\n }\n\n #katia-pediatra {\n --primary: #ff7b90;\n --primary-hover: #f3647c;\n --primary-light: #fff0f2;\n --secondary: #4ec0cf;\n --secondary-hover: #3caab8;\n --secondary-light: #e8f7f9;\n --accent: #ffd166;\n --accent-hover: #ecc055;\n --wa: #25D366;\n --wa-dark: #128C7E;\n --wa-light: #e6fcf0;\n\n --borde: rgba(78, 192, 207, 0.15);\n --card-bg: rgba(255, 255, 255, 0.76);\n --card-border: rgba(255, 255, 255, 0.7);\n --shadow: 0 16px 40px rgba(78, 192, 207, 0.06);\n --shadow-hover: 0 24px 48px rgba(78, 192, 207, 0.12);\n --text-dark: #1d363b;\n --text-muted: #53757c;\n --max: 1200px;\n\n display: block;\n position: relative;\n color: var(--text-dark);\n background: transparent;\n overflow: visible;\n font-size: 16px;\n line-height: 1.6;\n }\n\n html {\n scroll-behavior: smooth;\n }\n\n body {\n margin: 0;\n padding: 0;\n background: #f0fafc;\n \/* Fallback *\/\n }\n\n \/* Ocultar botones flotantes de chat\/whatsapp en esta p\u00e1gina *\/\n .joinchat,\n .wa__btn_popup,\n #whatsapp-chat-button,\n .botpress-webchat,\n #botpress-webchat,\n iframe[src*=\"botpress\"],\n #bp-web-widget,\n .bp-widget-widget,\n .bp-widget-side,\n .bp-widget-container,\n .floating-chat-btn,\n .wa-chat-button,\n #tidio-chat-iframe,\n #tidio-chat,\n .tidio-chat-widget,\n #btn-whatsapp {\n display: none !important;\n opacity: 0 !important;\n visibility: hidden !important;\n pointer-events: none !important;\n z-index: -9999 !important;\n }\n\n \/* Fondo animado pedi\u00e1trico (Aurora Boreal e Interacci\u00f3n Aceite\/Agua) *\/\n #katia-pediatra .pediatric-bg-wrapper {\n position: fixed;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 100vw;\n height: 100vh;\n pointer-events: none;\n z-index: 1;\n overflow: hidden;\n background: linear-gradient(135deg, #fff2f4 0%, #f0fafc 50%, #fcf7ff 100%);\n }\n\n #katia-pediatra .floating-orbs-container {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n overflow: hidden;\n }\n\n #katia-pediatra .orb {\n position: absolute;\n left: 0;\n top: 0;\n filter: blur(12px);\n opacity: 0.28;\n will-change: transform;\n pointer-events: none;\n }\n\n #katia-pediatra .orb-rose {\n color: #ff9ebb;\n }\n\n #katia-pediatra .orb-celeste {\n color: #aaeaf0;\n }\n\n #katia-pediatra .orb-purple {\n color: #e2c0fc;\n }\n\n #katia-pediatra .content-wrap {\n position: relative;\n z-index: 2;\n padding-top: 20px;\n }\n\n #katia-pediatra .wrap {\n max-width: var(--max);\n margin: 0 auto;\n padding: 60px 24px;\n }\n\n #katia-pediatra a {\n color: var(--secondary);\n text-decoration: none;\n transition: color 0.2s ease;\n }\n\n #katia-pediatra a:hover {\n color: var(--secondary-hover);\n }\n\n #katia-pediatra h2 {\n font-size: clamp(1.8rem, 2.3vw + 0.8rem, 2.6rem);\n line-height: 1.2;\n margin: 0 0 1rem;\n font-weight: 700;\n color: var(--secondary);\n letter-spacing: -0.01em;\n text-align: center;\n }\n\n #katia-pediatra p {\n margin: 0 0 1rem;\n color: var(--text-muted);\n line-height: 1.65;\n }\n\n \/* GLASS CARD PEDI\u00c1TRICA *\/\n #katia-pediatra .glass-card {\n background: var(--card-bg);\n backdrop-filter: blur(16px);\n -webkit-backdrop-filter: blur(16px);\n border: 1px solid var(--card-border);\n box-shadow: var(--shadow);\n border-radius: 28px;\n transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);\n }\n\n \/* CINTILLO \/ HEADER STICKY *\/\n .kp-ribbon-wrap {\n position: sticky;\n top: 0;\n z-index: 60;\n background: transparent;\n padding: 12px 24px 4px;\n }\n\n .kp-ribbon {\n max-width: var(--max);\n margin: 0 auto;\n }\n\n .kp-ribbon-inner {\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n gap: 20px;\n padding: 6px 24px;\n border-radius: 999px;\n background: rgba(255, 255, 255, 0.85);\n border: 1px solid rgba(78, 192, 207, 0.15);\n box-shadow: 0 12px 30px rgba(78, 192, 207, 0.08);\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n }\n\n \/* Ocultar elementos sobrantes del WordPress theme que puedan interferir *\/\n #masthead,\n .site-header,\n .ast-mobile-header-wrap,\n #colophon,\n .site-footer,\n .ast-footer-builder-1 {\n display: none !important;\n }\n\n .kp-logo-link {\n display: flex;\n align-items: center;\n text-decoration: none;\n flex-shrink: 0 !important;\n }\n\n .kp-logo-img {\n height: 60px !important;\n width: auto !important;\n max-height: 60px !important;\n object-fit: contain !important;\n display: block !important;\n transition: transform 0.2s ease;\n flex-shrink: 0 !important;\n }\n\n .kp-logo-link:hover .kp-logo-img {\n transform: scale(1.03);\n }\n\n .kp-nav-menu {\n display: flex;\n align-items: center;\n justify-content: center;\n justify-self: center;\n gap: 8px;\n }\n\n .kp-nav-menu a:not(.kp-social-btn) {\n font-family: 'Quicksand', sans-serif;\n font-weight: 700;\n font-size: 0.92rem;\n color: var(--text-muted) !important;\n padding: 6px 12px;\n border-radius: 12px;\n transition: all 0.25s ease;\n white-space: nowrap;\n }\n\n .kp-nav-menu a:not(.kp-social-btn):hover {\n color: var(--secondary-hover) !important;\n background: var(--secondary-light);\n }\n\n .kp-menu-toggle {\n display: none;\n flex-direction: column;\n justify-content: space-between;\n width: 24px;\n height: 18px;\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 0;\n }\n\n .kp-menu-toggle .kp-bar {\n width: 100%;\n height: 3px;\n background-color: var(--secondary);\n border-radius: 10px;\n transition: all 0.3s ease;\n }\n\n .kp-menu-toggle.active .kp-bar:nth-child(1) {\n transform: translateY(7.5px) rotate(45deg);\n }\n\n .kp-menu-toggle.active .kp-bar:nth-child(2) {\n opacity: 0;\n }\n\n .kp-menu-toggle.active .kp-bar:nth-child(3) {\n transform: translateY(-7.5px) rotate(-45deg);\n }\n\n .kp-social-header {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n margin-left: 15px;\n }\n\n .kp-social-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 34px;\n height: 34px;\n border-radius: 50%;\n background: rgba(78, 192, 207, 0.08);\n color: var(--text-muted) !important;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n border: 1px solid rgba(78, 192, 207, 0.15);\n text-decoration: none;\n }\n\n .kp-social-btn svg {\n transition: transform 0.3s ease;\n }\n\n .kp-social-btn:hover {\n transform: translateY(-3px) scale(1.05);\n color: #ffffff !important;\n border-color: transparent;\n box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);\n }\n\n .kp-social-btn:hover svg {\n transform: rotate(8deg);\n }\n\n .kp-social-btn.fb:hover {\n background: #1877F2 !important;\n }\n\n .kp-social-btn.ig:hover {\n background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;\n }\n\n .kp-social-btn.tt:hover {\n background: #000000 !important;\n }\n\n .kp-social-btn.wa {\n background: var(--wa) !important;\n color: #ffffff !important;\n border-color: transparent !important;\n box-shadow: 0 4px 10px rgba(37, 211, 102, 0.2);\n }\n\n .kp-social-btn.wa:hover {\n background: #20ba5a !important;\n box-shadow: 0 6px 15px rgba(37, 211, 102, 0.35);\n }\n\n @media (max-width: 1120px) {\n .kp-ribbon-wrap {\n padding: 8px 12px;\n }\n\n .kp-ribbon-inner {\n display: flex;\n flex-wrap: wrap;\n border-radius: 24px;\n padding: 12px 20px;\n gap: 0;\n }\n\n .kp-logo-link {\n order: 1;\n }\n\n .kp-logo-img {\n height: 48px !important;\n }\n\n .kp-menu-toggle {\n display: flex;\n order: 3;\n margin-left: auto;\n }\n\n .kp-nav-menu {\n display: none;\n flex-direction: column;\n width: 100%;\n gap: 4px;\n padding-top: 12px;\n border-top: 1px solid var(--borde);\n margin-top: 10px;\n align-items: stretch;\n order: 4;\n }\n\n .kp-nav-menu.active {\n display: flex;\n }\n\n .kp-nav-menu a:not(.kp-social-btn) {\n width: 100%;\n text-align: center;\n padding: 10px;\n }\n\n .kp-social-header {\n display: flex;\n justify-content: center;\n margin: 15px auto 5px;\n width: 100%;\n gap: 12px;\n }\n }\n\n \/* FOOTER *\/\n .footer-sec {\n background: rgba(29, 54, 59, 0.04);\n border-top: 1px solid var(--borde);\n padding: 40px 24px;\n text-align: center;\n margin-top: 60px;\n }\n\n .footer-container {\n max-width: var(--max);\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 20px;\n }\n\n .footer-disclaimer {\n font-size: 0.82rem;\n color: var(--text-muted);\n max-width: 700px;\n line-height: 1.5;\n }\n\n .footer-links {\n display: flex;\n gap: 20px;\n flex-wrap: wrap;\n justify-content: center;\n font-size: 0.9rem;\n }\n\n .footer-links a {\n color: var(--text-muted);\n }\n\n .footer-links a:hover {\n color: var(--secondary);\n }\n\n .footer-copyright {\n font-size: 0.85rem;\n color: var(--text-muted);\n margin-top: 10px;\n }\n\n .footer-social {\n display: flex;\n justify-content: center;\n gap: 16px;\n margin: 15px 0 20px;\n }\n\n \/* AGORA CSS *\/\n .status-indicator {\n display: inline-block;\n width: 8px;\n height: 8px;\n background-color: #22c55e;\n border-radius: 50%;\n margin-right: 6px;\n }\n\n .video-grid {\n position: relative;\n width: 100%;\n height: 600px;\n background-color: #020617;\n border-radius: 20px;\n overflow: hidden;\n box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);\n border: 4px solid rgba(255, 255, 255, 0.6);\n margin-top: 20px;\n }\n\n #remote-player {\n width: 100%;\n height: 100%;\n background-color: #0f172a;\n }\n\n #local-player {\n position: absolute;\n top: 16px;\n right: 16px;\n width: 200px;\n height: 150px;\n background-color: #1e293b;\n border-radius: 12px;\n border: 2px solid #0284c7;\n z-index: 10;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);\n overflow: hidden;\n }\n\n .video-label {\n position: absolute;\n bottom: 16px;\n left: 16px;\n background: rgba(15, 23, 42, 0.75);\n padding: 6px 12px;\n border-radius: 8px;\n font-size: 0.85rem;\n color: #f8fafc;\n z-index: 12;\n backdrop-filter: blur(4px);\n }\n\n #subtitles-overlay {\n position: absolute;\n bottom: 60px;\n left: 50%;\n transform: translateX(-50%);\n width: 85%;\n max-width: 800px;\n background: rgba(78, 192, 207, 0.85); \/* Katia's Blue *\/\n backdrop-filter: blur(8px);\n border: 1px solid #0284c7;\n border-radius: 12px;\n padding: 12px 20px;\n text-align: center;\n z-index: 20;\n transition: opacity 0.3s ease, transform 0.3s ease;\n }\n\n #subtitles-overlay.hidden {\n opacity: 0;\n pointer-events: none;\n transform: translate(-50%, 20px);\n }\n\n .video-grid:-webkit-full-screen {\n border: none !important;\n border-radius: 0 !important;\n height: 100vh !important;\n width: 100vw !important;\n margin: 0 !important;\n max-width: none !important;\n }\n\n .video-grid:fullscreen {\n border: none !important;\n border-radius: 0 !important;\n height: 100vh !important;\n width: 100vw !important;\n margin: 0 !important;\n max-width: none !important;\n }\n\n .video-floating-controls {\n position: absolute;\n bottom: 20px;\n right: 15px;\n display: none; \/* Se activa al conectar *\/\n flex-direction: column;\n gap: 10px;\n z-index: 60;\n transform-origin: bottom right;\n transform: scale(0.85); \/* Tama\u00f1o reducido por defecto en vista web *\/\n transition: all 0.3s ease;\n }\n\n .video-grid:fullscreen .video-floating-controls {\n transform: scale(1.1); \/* M\u00e1s grandes en pantalla completa *\/\n bottom: 30px;\n right: 30px;\n gap: 12px;\n }\n\n .vf-btn {\n background: rgba(15, 23, 42, 0.6);\n border: 1px solid rgba(255, 255, 255, 0.2);\n color: white;\n width: 44px;\n height: 44px;\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n backdrop-filter: blur(4px);\n transition: all 0.2s ease;\n }\n\n .vf-btn:hover {\n background: rgba(15, 23, 42, 0.9);\n border-color: var(--secondary);\n transform: scale(1.05);\n }\n\n .vf-btn.active {\n background: var(--secondary);\n border-color: var(--secondary-hover);\n }\n\n .vf-btn svg {\n width: 24px;\n height: 24px;\n }\n\n .subtitle-badge {\n font-size: 0.7rem;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: #38bdf8;\n font-weight: 700;\n margin-bottom: 6px;\n }\n\n .subtitle-content {\n margin: 0;\n font-size: 1.1rem;\n line-height: 1.4;\n color: #f8fafc;\n font-weight: 500;\n }\n\n .telemed-controls {\n text-align: center;\n margin-top: 20px;\n display: flex;\n gap: 15px;\n justify-content: center;\n }\n\n .language-settings {\n display: flex;\n justify-content: center;\n gap: 20px;\n margin-top: 20px;\n flex-wrap: wrap;\n padding: 10px;\n background: rgba(255, 255, 255, 0.5);\n border-radius: 12px;\n border: 1px solid var(--borde);\n }\n\n .lang-group {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .lang-group label {\n font-size: 0.9rem;\n color: var(--text-dark);\n font-weight: 600;\n }\n\n .lang-select {\n padding: 6px 12px;\n border-radius: 8px;\n border: 1px solid var(--borde);\n background: white;\n color: var(--text-dark);\n font-family: 'Outfit', sans-serif;\n outline: none;\n cursor: pointer;\n font-size: 0.9rem;\n }\n\n .ctrl-btn {\n background-color: var(--secondary);\n color: #ffffff;\n border: none;\n padding: 14px 28px;\n border-radius: 999px;\n cursor: pointer;\n font-size: 1.05rem;\n font-weight: 700;\n box-shadow: 0 8px 20px rgba(78, 192, 207, 0.3);\n transition: all 0.3s ease;\n font-family: 'Quicksand', sans-serif;\n }\n\n .ctrl-btn:hover {\n background-color: var(--secondary-hover);\n transform: translateY(-2px);\n box-shadow: 0 12px 25px rgba(78, 192, 207, 0.4);\n }\n\n .leave-btn {\n background-color: #ef4444;\n box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3);\n }\n\n .leave-btn:hover {\n background-color: #dc2626;\n box-shadow: 0 12px 25px rgba(239, 68, 68, 0.4);\n }\n\n @media (max-width: 768px) {\n .video-grid {\n height: 420px;\n }\n\n #local-player {\n width: 100px;\n height: 75px;\n top: 60px;\n right: 10px;\n }\n\n #subtitles-overlay {\n width: 92%;\n bottom: 10px;\n padding: 8px 10px;\n }\n\n .subtitle-content {\n font-size: 0.95rem;\n }\n\n .video-floating-controls {\n bottom: 10px;\n right: 10px;\n transform: scale(0.75); \/* A\u00fan m\u00e1s peque\u00f1os en m\u00f3vil *\/\n gap: 6px;\n }\n\n .video-grid:fullscreen .video-floating-controls {\n transform: scale(1); \/* Tama\u00f1o normal en pantalla completa de m\u00f3vil *\/\n bottom: 20px;\n right: 20px;\n }\n\n .vf-btn {\n width: 36px;\n height: 36px;\n border-radius: 8px;\n }\n\n .vf-btn .material-symbols-outlined {\n font-size: 20px !important;\n }\n }\n\n #remote-player {\n width: 100%;\n height: 100%;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 10px;\n padding: 10px;\n box-sizing: border-box;\n background: #0f172a;\n align-items: center;\n justify-items: center;\n }\n\n .remote-video-item {\n position: relative;\n width: 100%;\n height: 100%;\n border-radius: 12px;\n overflow: hidden;\n background: #000;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);\n }\n <\/style>\n<\/head>\n\n<body>\n\n <div id=\"katia-pediatra\" style=\"all:initial\">\n\n <div class=\"pediatric-bg-wrapper\">\n <div class=\"floating-orbs-container\" id=\"bg-orbs-container\">\n <div class=\"orb orb-rose\" style=\"width: 25vw; height: 25vw;\">\n <svg viewBox=\"0 0 100 100\" width=\"100%\" height=\"100%\">\n <circle cx=\"28\" cy=\"28\" r=\"12\" fill=\"currentColor\" \/>\n <circle cx=\"72\" cy=\"28\" r=\"12\" fill=\"currentColor\" \/>\n <circle cx=\"50\" cy=\"55\" r=\"30\" fill=\"currentColor\" \/>\n <\/svg>\n <\/div>\n <div class=\"orb orb-celeste\" style=\"width: 22vw; height: 22vw;\">\n <svg viewBox=\"0 0 100 100\" width=\"100%\" height=\"100%\">\n <circle cx=\"28\" cy=\"28\" r=\"12\" fill=\"currentColor\" \/>\n <circle cx=\"72\" cy=\"28\" r=\"12\" fill=\"currentColor\" \/>\n <circle cx=\"50\" cy=\"55\" r=\"30\" fill=\"currentColor\" \/>\n <\/svg>\n <\/div>\n <div class=\"orb orb-purple\" style=\"width: 20vw; height: 20vw;\">\n <svg viewBox=\"0 0 100 100\" width=\"100%\" height=\"100%\">\n <circle cx=\"28\" cy=\"28\" r=\"12\" fill=\"currentColor\" \/>\n <circle cx=\"72\" cy=\"28\" r=\"12\" fill=\"currentColor\" \/>\n <circle cx=\"50\" cy=\"55\" r=\"30\" fill=\"currentColor\" \/>\n <\/svg>\n <\/div>\n <div class=\"orb orb-rose\" style=\"width: 24vw; height: 24vw;\">\n <svg viewBox=\"0 0 100 100\" width=\"100%\" height=\"100%\">\n <circle cx=\"28\" cy=\"28\" r=\"12\" fill=\"currentColor\" \/>\n <circle cx=\"72\" cy=\"28\" r=\"12\" fill=\"currentColor\" \/>\n <circle cx=\"50\" cy=\"55\" r=\"30\" fill=\"currentColor\" \/>\n <\/svg>\n <\/div>\n <div class=\"orb orb-celeste\" style=\"width: 23vw; height: 23vw;\">\n <svg viewBox=\"0 0 100 100\" width=\"100%\" height=\"100%\">\n <circle cx=\"28\" cy=\"28\" r=\"12\" fill=\"currentColor\" \/>\n <circle cx=\"72\" cy=\"28\" r=\"12\" fill=\"currentColor\" \/>\n <circle cx=\"50\" cy=\"55\" r=\"30\" fill=\"currentColor\" \/>\n <\/svg>\n <\/div>\n <div class=\"orb orb-purple\" style=\"width: 18vw; height: 18vw;\">\n <svg viewBox=\"0 0 100 100\" width=\"100%\" height=\"100%\">\n <circle cx=\"28\" cy=\"28\" r=\"12\" fill=\"currentColor\" \/>\n <circle cx=\"72\" cy=\"28\" r=\"12\" fill=\"currentColor\" \/>\n <circle cx=\"50\" cy=\"55\" r=\"30\" fill=\"currentColor\" \/>\n <\/svg>\n <\/div>\n <div class=\"orb orb-rose\" style=\"width: 22vw; height: 22vw;\">\n <svg viewBox=\"0 0 100 100\" width=\"100%\" height=\"100%\">\n <circle cx=\"28\" cy=\"28\" r=\"12\" fill=\"currentColor\" \/>\n <circle cx=\"72\" cy=\"28\" r=\"12\" fill=\"currentColor\" \/>\n <circle cx=\"50\" cy=\"55\" r=\"30\" fill=\"currentColor\" \/>\n <\/svg>\n <\/div>\n <div class=\"orb orb-celeste\" style=\"width: 19vw; height: 19vw;\">\n <svg viewBox=\"0 0 100 100\" width=\"100%\" height=\"100%\">\n <circle cx=\"28\" cy=\"28\" r=\"12\" fill=\"currentColor\" \/>\n <circle cx=\"72\" cy=\"28\" r=\"12\" fill=\"currentColor\" \/>\n <circle cx=\"50\" cy=\"55\" r=\"30\" fill=\"currentColor\" \/>\n <\/svg>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"content-wrap\">\n\n <!-- HEADER STICKY -->\n <header class=\"kp-ribbon-wrap\">\n <div class=\"kp-ribbon\">\n <div class=\"kp-ribbon-inner\">\n <a href=\"https:\/\/katiatupediatra.es\/es_es\/\" class=\"kp-logo-link\">\n <img decoding=\"async\" src=\"https:\/\/katiatupediatra.es\/wp-content\/uploads\/2025\/07\/cropped-LOGO-KATIATUPEDIATRA-scaled-1.png\"\n alt=\"KatiaTuPediatra Logo\" class=\"kp-logo-img\" data-no-lazy=\"1\" loading=\"eager\">\n <\/a>\n <button class=\"kp-menu-toggle\" aria-label=\"Abrir men\u00fa\" onclick=\"toggleHeaderMenu()\">\n <span class=\"kp-bar\"><\/span>\n <span class=\"kp-bar\"><\/span>\n <span class=\"kp-bar\"><\/span>\n <\/button>\n <nav class=\"kp-nav-menu\">\n <a href=\"https:\/\/katiatupediatra.es\/es_es\/sobre-mi-pediatra-gran-alacant\/\" target=\"_blank\"\n rel=\"noopener\">Sobre M\u00ed<\/a>\n <a href=\"https:\/\/katiatupediatra.es\/servicios-pediatra-gran-alacant\/\">Servicios y Tarifas<\/a>\n <a href=\"https:\/\/katiatupediatra.es\/es_es\/pediatria-en-gran-alacant\/\" target=\"_blank\"\n rel=\"noopener\">Consejos<\/a>\n <a href=\"https:\/\/katiatupediatra.es\/es_es\/agendar-cita\/\" target=\"_blank\" rel=\"noopener\">Agendar Cita<\/a>\n <a href=\"https:\/\/katiatupediatra.es\/es_es\/aseguradoras\/\" target=\"_blank\" rel=\"noopener\">Aseguradoras<\/a>\n <div class=\"kp-social-header\">\n <a href=\"https:\/\/www.facebook.com\/katiatupediatra\/\" target=\"_blank\" rel=\"noopener\" aria-label=\"Facebook\" class=\"kp-social-btn fb\">\n <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"currentColor\">\n <path\n d=\"M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z\" \/>\n <\/svg>\n <\/a>\n <a href=\"https:\/\/www.instagram.com\/katiatupediatra\/\" target=\"_blank\" rel=\"noopener\" aria-label=\"Instagram\" class=\"kp-social-btn ig\">\n <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"currentColor\">\n <path\n d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.051.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z\" \/>\n <\/svg>\n <\/a>\n <a href=\"https:\/\/www.tiktok.com\/@katiatupediatra\" target=\"_blank\" rel=\"noopener\" aria-label=\"TikTok\" class=\"kp-social-btn tt\">\n <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"currentColor\">\n <path\n d=\"M12.525.02c1.31-.03 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.17-2.86-.74-3.99-1.72-.02 2.76-.01 5.51-.02 8.27-.07 2.18-.94 4.41-2.69 5.73-2.1 1.62-4.9 2.03-7.44 1.5-2.8-.52-5.27-2.76-5.83-5.55-.74-3.34.82-7.14 3.99-8.48 1.14-.5 2.39-.69 3.62-.64v3.9c-.83-.06-1.72.07-2.45.51-1.22.7-1.92 2.16-1.72 3.56.24 1.63 1.83 2.89 3.49 2.75 1.59-.06 2.92-1.34 3.01-2.92.05-3.56.02-7.12.03-10.68.02-3.19.01-6.38.02-9.58z\" \/>\n <\/svg>\n <\/a>\n <\/div>\n <\/nav>\n <\/div>\n <\/div>\n <\/header>\n\n <!-- \u00c1REA PRINCIPAL VIDEOCONSULTA AGORA -->\n <div class=\"wrap\" style=\"text-align: center; max-width: 1000px; padding-top: 40px; padding-bottom: 40px;\">\n\n <h2>Videoconsulta Pedi\u00e1trica Online<\/h2>\n <p style=\"margin-bottom: 30px; font-size: 1.1rem; max-width: 700px; margin-left: auto; margin-right: auto;\">\n Conecta en tiempo real con la Dra. Katia Herrera. La sala virtual cuenta con sistema de subt\u00edtulos autom\u00e1ticos\n integrados en tu pantalla.\n <\/p>\n\n <div class=\"glass-card\" style=\"padding: 24px;\">\n <!-- AGORA VIDEO WIDGET -->\n <div class=\"video-grid\" id=\"main-video-container\">\n <img decoding=\"async\" src=\"https:\/\/katiatupediatra.es\/wp-content\/uploads\/2025\/07\/cropped-LOGO-KATIATUPEDIATRA-scaled-1.png\" alt=\"Logo Katia\" style=\"position: absolute; top: 15px; left: 15px; width: 60px; height: auto; z-index: 40; filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.5)); border-radius: 8px;\">\n\n\n <div class=\"video-floating-controls\" id=\"floating-controls\">\n <button class=\"vf-btn\" id=\"btn-mic\" onclick=\"toggleMic()\" title=\"Silenciar Micr\u00f3fono\"\n style=\"display: flex; align-items: center; justify-content: center; color: white;\">\n <span class=\"material-symbols-outlined\" style=\"font-size: 24px;\">mic<\/span>\n <\/button>\n <button class=\"vf-btn\" id=\"btn-cam\" onclick=\"toggleCam()\" title=\"Apagar C\u00e1mara\"\n style=\"display: flex; align-items: center; justify-content: center; color: white;\">\n <span class=\"material-symbols-outlined\" style=\"font-size: 24px;\">videocam<\/span>\n <\/button>\n <button class=\"vf-btn\" id=\"btn-flip\" onclick=\"flipCamera()\" title=\"Girar C\u00e1mara\"\n style=\"display: flex; align-items: center; justify-content: center; color: white;\">\n <span class=\"material-symbols-outlined\" style=\"font-size: 24px;\">flip_camera_ios<\/span>\n <\/button>\n <button class=\"vf-btn\" onclick=\"toggleFullScreen()\" title=\"Pantalla Completa\"\n style=\"display: flex; align-items: center; justify-content: center; color: white;\">\n <span class=\"material-symbols-outlined\" style=\"font-size: 24px;\">fullscreen<\/span>\n <\/button>\n <button class=\"vf-btn\" id=\"btn-cc\" onclick=\"toggleSubtitles()\" title=\"Activar\/Desactivar Subt\u00edtulos\"\n style=\"display: flex; align-items: center; justify-content: center; color: white;\">\n <span class=\"material-symbols-outlined\" style=\"font-size: 24px;\">closed_caption<\/span>\n <\/button>\n <\/div>\n\n <div id=\"welcome-overlay\"\n style=\"position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center;\">\n\n <!-- Vista de Paciente -->\n <div id=\"patient-view\" style=\"display:flex; flex-direction:column; align-items:center; width:100%;\">\n <div\n style=\"background: rgba(255,255,255,0.1); padding: 20px; border-radius: 50%; margin-bottom: 20px; border: 1px solid rgba(255,255,255,0.2);\">\n <span class=\"material-symbols-outlined\"\n style=\"font-size: 48px; color: #38bdf8;\">medical_services<\/span>\n <\/div>\n <h3 style=\"color: white; margin-bottom: 10px; font-family: 'Quicksand', sans-serif; font-size: 1.8rem;\">\n Sala Virtual Pedi\u00e1trica<\/h3>\n <p style=\"color: #cbd5e1; margin-bottom: 20px; font-size: 1rem; max-width: 80%; text-align: center;\">\n Introduce el c\u00f3digo de consulta para conectar con tu doctora.<\/p>\n\n <input type=\"text\" id=\"room-code-input\" placeholder=\"Ej. leo_martes\"\n style=\"padding: 12px 20px; border-radius: 99px; border: none; outline: none; font-size: 1.1rem; text-align: center; margin-bottom: 20px; width: 80%; max-width: 300px;\">\n <button class=\"ctrl-btn\" onclick=\"startConsultation()\" id=\"btn-conectar-overlay\">Unirse a la\n Consulta<\/button>\n\n <div\n style=\"margin-top: 40px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 15px; width: 100%; text-align: center;\">\n <button onclick=\"showAdminLogin()\"\n style=\"background:none; border:none; color: #94a3b8; font-size: 0.9rem; cursor:pointer; text-decoration:underline;\">Acceso\n Dra. Katia<\/button>\n <\/div>\n <\/div>\n\n <!-- Vista de Login Admin -->\n <div id=\"admin-view\" style=\"display:none; flex-direction:column; align-items:center; width:100%;\">\n <span class=\"material-symbols-outlined\"\n style=\"font-size: 48px; color: var(--primary); margin-bottom: 15px;\">lock_person<\/span>\n <h3 style=\"color: white; margin-bottom: 10px;\">Acceso Doctora<\/h3>\n <input type=\"password\" id=\"admin-pin-input\" placeholder=\"PIN Maestro\"\n style=\"padding: 12px 20px; border-radius: 99px; border: none; outline: none; font-size: 1.1rem; text-align: center; margin-bottom: 10px; width: 80%; max-width: 250px;\"\n onkeypress=\"if(event.key === 'Enter') loginAdmin()\">\n \n <div style=\"display: flex; align-items: center; gap: 8px; margin-bottom: 20px; color: white; font-size: 0.9rem;\">\n <input type=\"checkbox\" id=\"remember-pin\" style=\"cursor: pointer;\">\n <label for=\"remember-pin\" style=\"color: #ffffff !important; cursor: pointer; user-select: none;\">Recordar clave<\/label>\n <\/div>\n\n <button class=\"ctrl-btn\" onclick=\"loginAdmin()\"\n style=\"background:var(--primary); margin-bottom:15px; border:none; padding:12px 30px;\">Verificar<\/button>\n <button onclick=\"hideAdminLogin()\"\n style=\"background:none; border:none; color: #94a3b8; font-size: 0.9rem; cursor:pointer; text-decoration:underline;\">Volver\n al inicio<\/button>\n <\/div>\n\n <!-- Panel de Control Admin -->\n <div id=\"admin-dashboard\" style=\"display:none; flex-direction:column; align-items:center; width:100%;\">\n <span class=\"material-symbols-outlined\"\n style=\"font-size: 48px; color: #25D366; margin-bottom: 15px;\">verified_user<\/span>\n <h3 style=\"color: white; margin-bottom: 20px;\">Modo Doctora Activo<\/h3>\n <button class=\"ctrl-btn\" onclick=\"createRandomRoom()\"\n style=\"margin-bottom: 30px; background:#4ec0cf; border:none; display:flex; align-items:center; gap:8px;\">\n <span class=\"material-symbols-outlined\" style=\"font-size:20px;\">add_link<\/span> Crear Nueva Sala para\n Paciente\n <\/button>\n\n <p style=\"color: #cbd5e1; font-size: 0.95rem; margin-bottom: 10px;\">O entra a una sala existente:<\/p>\n <div\n style=\"display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center; width: 100%; max-width: 500px;\">\n <input type=\"text\" id=\"admin-room-input\" placeholder=\"Nombre de sala\"\n style=\"padding: 10px 15px; border-radius: 8px; border:none; outline:none; flex-grow: 1; min-width: 180px;\">\n <div style=\"display: flex; gap: 10px;\">\n <button class=\"ctrl-btn\" id=\"btn-copy-link\" onclick=\"copyRoomLink()\"\n style=\"padding: 10px; border:none; background:#64748b; display:none; align-items:center; justify-content:center; border-radius: 8px; height: 44px;\"\n title=\"Copiar Enlace para el Paciente\">\n <span class=\"material-symbols-outlined\" style=\"font-size:20px;\">content_copy<\/span>\n <\/button>\n <button class=\"ctrl-btn\" id=\"btn-admin-conectar\" onclick=\"startAdminConsultation()\"\n style=\"padding: 10px 20px; border:none; font-size:1rem; border-radius: 8px; height: 44px; margin: 0;\">Entrar\n a Sala<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n <div id=\"remote-player\"><\/div>\n <div id=\"local-player\"><\/div>\n\n <div class=\"video-label\">\n <span class=\"status-indicator\"><\/span><span id=\"room-status\">Esperando conexi\u00f3n...<\/span>\n <\/div>\n\n <div id=\"subtitles-overlay\" class=\"hidden\">\n <div class=\"subtitle-badge\">Traducci\u00f3n \/ Subt\u00edtulos<\/div>\n <p id=\"subtitle-text\" class=\"subtitle-content\">La transcripci\u00f3n aparecer\u00e1 aqu\u00ed durante la llamada...<\/p>\n <\/div>\n <\/div>\n\n <div class=\"telemed-controls\">\n <button class=\"ctrl-btn leave-btn\" onclick=\"leaveConsultation()\" id=\"btn-salir\" style=\"display:none;\">Salir\n de la Consulta<\/button>\n <\/div>\n\n <!-- CONTROLES DE IDIOMA PARA SUBT\u00cdTULOS -->\n <div class=\"language-settings\" id=\"lang-settings\" style=\"display:none;\">\n <div class=\"lang-group\">\n <label>Idioma Doctora:<\/label>\n <select id=\"my-language\" class=\"lang-select\" onchange=\"syncLanguages()\">\n <option value=\"es-ES\" selected>Espa\u00f1ol<\/option>\n <option value=\"en-US\">Ingl\u00e9s<\/option>\n <option value=\"fr-FR\">Franc\u00e9s<\/option>\n <option value=\"de-DE\">Alem\u00e1n<\/option>\n <option value=\"it-IT\">Italiano<\/option>\n <option value=\"pt-PT\">Portugu\u00e9s<\/option>\n <\/select>\n <\/div>\n <div class=\"lang-group\">\n <label>Idioma del paciente:<\/label>\n <select id=\"sub-language\" class=\"lang-select\" onchange=\"syncLanguages()\">\n <option value=\"es-ES\">Espa\u00f1ol<\/option>\n <option value=\"en-US\" selected>Ingl\u00e9s<\/option>\n <option value=\"fr-FR\">Franc\u00e9s<\/option>\n <option value=\"de-DE\">Alem\u00e1n<\/option>\n <option value=\"it-IT\">Italiano<\/option>\n <option value=\"pt-PT\">Portugu\u00e9s<\/option>\n <\/select>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n <!-- FOOTER -->\n <footer class=\"footer-sec\">\n <div class=\"footer-container\">\n <div class=\"footer-disclaimer\">\n \u26a0\ufe0f <b>Aviso de salud importante:<\/b> La informaci\u00f3n en esta web y las consultas online sirven como\n orientaci\u00f3n profesional y no sustituyen una atenci\u00f3n hospitalaria en caso de emergencias de riesgo vital. Si\n tu hijo requiere atenci\u00f3n m\u00e9dica cr\u00edtica, llama de inmediato al 112 o acude a urgencias.\n <\/div>\n\n <div class=\"footer-links\">\n <a href=\"https:\/\/katiatupediatra.es\/es_es\/politica-de-cookies-ue\/\" target=\"_blank\">Pol\u00edtica de Cookies<\/a>\n <a href=\"https:\/\/katiatupediatra.es\/es_es\/\">Inicio<\/a>\n <a href=\"https:\/\/katiatupediatra.es\/es_es\/servicios-pediatra-gran-alacant\/\">Servicios<\/a>\n <a href=\"https:\/\/katiatupediatra.es\/es_es\/agendar-cita\/\">Agendar Cita<\/a>\n <a href=\"https:\/\/katiatupediatra.es\/es_es\/contacto\/\">Contacto<\/a>\n <\/div>\n\n <div class=\"footer-social\">\n <a href=\"https:\/\/www.facebook.com\/katiatupediatra\/\" target=\"_blank\" rel=\"noopener\" aria-label=\"Facebook\" class=\"kp-social-btn fb\">\n <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"currentColor\">\n <path\n d=\"M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z\" \/>\n <\/svg>\n <\/a>\n <a href=\"https:\/\/www.instagram.com\/katiatupediatra\/\" target=\"_blank\" rel=\"noopener\" aria-label=\"Instagram\" class=\"kp-social-btn ig\">\n <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"currentColor\">\n <path\n d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.051.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z\" \/>\n <\/svg>\n <\/a>\n <a href=\"https:\/\/www.tiktok.com\/@katiatupediatra\" target=\"_blank\" rel=\"noopener\" aria-label=\"TikTok\" class=\"kp-social-btn tt\">\n <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"currentColor\">\n <path\n d=\"M12.525.02c1.31-.03 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.17-2.86-.74-3.99-1.72-.02 2.76-.01 5.51-.02 8.27-.07 2.18-.94 4.41-2.69 5.73-2.1 1.62-4.9 2.03-7.44 1.5-2.8-.52-5.27-2.76-5.83-5.55-.74-3.34.82-7.14 3.99-8.48 1.14-.5 2.39-.69 3.62-.64v3.9c-.83-.06-1.72.07-2.45.51-1.22.7-1.92 2.16-1.72 3.56.24 1.63 1.83 2.89 3.49 2.75 1.59-.06 2.92-1.34 3.01-2.92.05-3.56.02-7.12.03-10.68.02-3.19.01-6.38.02-9.58z\" \/>\n <\/svg>\n <\/a>\n <\/div>\n\n <div class=\"footer-copyright\">\n \u00a9 <span id=\"year-span\">2026<\/span> Dra. Katia Herrera. Todos los derechos reservados.<br>\n <span style=\"font-size:0.78rem; opacity:0.7;\">Redise\u00f1o premium con fines profesionales y amigables.<\/span>\n <\/div>\n <\/div>\n <\/footer>\n\n <\/div>\n <\/div>\n\n <!-- SCRIPTS DE INTERACCI\u00d3N -->\n <script>\n (function () {\n \/\/ --- Interacci\u00f3n Aceite y Agua para el Fondo (Ositos Flotantes) ---\n (function initBackgroundInteraction() {\n const container = document.getElementById('bg-orbs-container');\n if (!container) return;\n const orbs = container.querySelectorAll('.orb');\n if (!orbs.length) return;\n\n const orbData = [];\n const baseCoords = [\n { x: 10, y: 12, widthPct: 25, scale: 1 },\n { x: 88, y: 18, widthPct: 22, scale: 1.1 },\n { x: 22, y: 40, widthPct: 20, scale: 0.9 },\n { x: 82, y: 55, widthPct: 24, scale: 1.05 },\n { x: 15, y: 72, widthPct: 23, scale: 0.95 },\n { x: 90, y: 88, widthPct: 18, scale: 0.85 },\n { x: 45, y: 92, widthPct: 22, scale: 1.0 },\n { x: 50, y: 30, widthPct: 19, scale: 0.95 }\n ];\n\n orbs.forEach((orb, i) => {\n const coords = baseCoords[i] || { x: Math.random() * 80, y: Math.random() * 80, widthPct: 20, scale: 1 };\n orbData.push({\n el: orb,\n baseX: coords.x,\n baseY: coords.y,\n widthPct: coords.widthPct,\n scale: coords.scale,\n x: 0, y: 0, targetX: 0, targetY: 0, vx: 0, vy: 0, radius: 0,\n phase: Math.random() * Math.PI * 2,\n speed: 0.0005 + Math.random() * 0.0005\n });\n });\n\n const mouse = { x: -10000, y: -10000, active: false };\n\n window.addEventListener('mousemove', (e) => {\n mouse.x = e.clientX;\n mouse.y = e.clientY;\n mouse.active = true;\n });\n window.addEventListener('mouseleave', () => { mouse.active = false; });\n window.addEventListener('touchmove', (e) => {\n if (e.touches.length > 0) {\n mouse.x = e.touches[0].clientX;\n mouse.y = e.touches[0].clientY;\n mouse.active = true;\n }\n }, { passive: true });\n window.addEventListener('touchend', () => { mouse.active = false; });\n\n function resize() {\n const w = container.clientWidth;\n const h = container.clientHeight;\n orbData.forEach(orb => {\n const pxX = (orb.baseX \/ 100) * w;\n const pxY = (orb.baseY \/ 100) * h;\n orb.x = pxX;\n orb.y = pxY;\n orb.targetX = pxX;\n orb.targetY = pxY;\n orb.vx = 0;\n orb.vy = 0;\n orb.radius = ((orb.widthPct \/ 100) * w) \/ 2;\n });\n }\n\n window.addEventListener('resize', resize);\n resize();\n\n function animate() {\n const w = container.clientWidth;\n const h = container.clientHeight;\n\n orbData.forEach(orb => {\n orb.phase += orb.speed;\n const driftX = Math.sin(orb.phase) * (w * 0.08);\n const driftY = Math.cos(orb.phase * 0.8) * (h * 0.08);\n const currentHomeX = ((orb.baseX \/ 100) * w) + driftX;\n const currentHomeY = ((orb.baseY \/ 100) * h) + driftY;\n\n orb.targetX = currentHomeX;\n orb.targetY = currentHomeY;\n\n if (mouse.active) {\n const dx = orb.x - mouse.x;\n const dy = orb.y - mouse.y;\n const dist = Math.sqrt(dx * dx + dy * dy);\n const threshold = Math.min(w, h) * 0.35;\n\n if (dist < threshold && dist > 0) {\n const force = (threshold - dist) \/ threshold;\n const push = force * force * 2.5;\n orb.vx += (dx \/ dist) * push * 2.5;\n orb.vy += (dy \/ dist) * push * 2.5;\n }\n }\n\n const springK = 0.02;\n const ax = (orb.targetX - orb.x) * springK;\n const ay = (orb.targetY - orb.y) * springK;\n\n orb.vx += ax;\n orb.vy += ay;\n\n const damping = 0.92;\n orb.vx *= damping;\n orb.vy *= damping;\n\n orb.x += orb.vx;\n orb.y += orb.vy;\n\n orb.el.style.transform = `translate3d(${orb.x - orb.radius}px, ${orb.y - orb.radius}px, 0) scale(${orb.scale})`;\n });\n\n requestAnimationFrame(animate);\n }\n requestAnimationFrame(animate);\n })();\n\n \/\/ Configurar a\u00f1o din\u00e1mico en footer\n const ys = document.getElementById('year-span');\n if (ys) ys.textContent = new Date().getFullYear();\n\n \/\/ Men\u00fa M\u00f3vil del Cintillo\n window.toggleHeaderMenu = function () {\n const toggle = document.querySelector('.kp-menu-toggle');\n const menu = document.querySelector('.kp-nav-menu');\n if (toggle && menu) {\n toggle.classList.toggle('active');\n menu.classList.toggle('active');\n }\n };\n })();\n <\/script>\n\n <!-- SCRIPT AGORA VIDEOCONSULTA -->\n <script>\n const urlParams = new URLSearchParams(window.location.search);\n const AGORA_APP_ID = \"7d2ee2a7b71f46049e8ea6608170d763\";\n\n\n \/\/ Ocultar bot\u00f3n CC por defecto para proteger cobros IA\n document.getElementById(\"btn-cc\").style.display = \"none\";\n let isAdmin = false;\n\n \/\/ Si la URL ya trae una sala, pre-llenar el input del paciente\n let urlRoom = urlParams.get('sala');\n if (urlRoom) {\n document.getElementById(\"room-code-input\").value = urlRoom;\n }\n\n \/\/ L\u00f3gica de Login Admin\n function showAdminLogin() {\n document.getElementById(\"patient-view\").style.display = \"none\";\n document.getElementById(\"admin-view\").style.display = \"flex\";\n \n const pinInput = document.getElementById(\"admin-pin-input\");\n const savedPin = localStorage.getItem(\"katiatupediatra_admin_pin\");\n if (savedPin) {\n pinInput.value = savedPin;\n document.getElementById(\"remember-pin\").checked = true;\n }\n setTimeout(() => pinInput.focus(), 100);\n }\n\n function hideAdminLogin() {\n document.getElementById(\"admin-view\").style.display = \"none\";\n document.getElementById(\"patient-view\").style.display = \"flex\";\n }\n\n function loginAdmin() {\n const pin = document.getElementById(\"admin-pin-input\").value;\n if (pin === \"1234\") { \/\/ PIN MAESTRO\n if (document.getElementById(\"remember-pin\").checked) {\n localStorage.setItem(\"katiatupediatra_admin_pin\", pin);\n } else {\n localStorage.removeItem(\"katiatupediatra_admin_pin\");\n }\n isAdmin = true;\n document.getElementById(\"admin-view\").style.display = \"none\";\n document.getElementById(\"admin-dashboard\").style.display = \"flex\";\n document.getElementById(\"btn-cc\").style.display = \"flex\"; \/\/ Habilitar IA para la doctora\n document.getElementById(\"lang-settings\").style.display = \"flex\"; \/\/ Habilitar idiomas para la doctora\n } else {\n alert(\"PIN Incorrecto. Acceso denegado.\");\n }\n }\n\n function createRandomRoom() {\n const nombrePaciente = prompt(\"Escribe el nombre del paciente o familia (ej. paco, familia_perez):\");\n if (!nombrePaciente) return; \/\/ Si cancela o deja vac\u00edo, no hacemos nada\n\n \/\/ Limpiamos el nombre (quitamos espacios, pasamos a min\u00fasculas, etc.)\n const nombreLimpio = nombrePaciente.trim().replace(\/\\s+\/g, '_').toLowerCase();\n\n \/\/ Creamos la sala con nombre + c\u00f3digo seguro aleatorio\n const codigoSeguro = Math.random().toString(36).substring(2, 6);\n const randomRoom = \"sala_\" + nombreLimpio + \"_\" + codigoSeguro;\n\n \/\/ Cambiar url visualmente para f\u00e1cil copia\n const newUrl = window.location.protocol + \"\/\/\" + window.location.host + window.location.pathname + \"?sala=\" + randomRoom;\n window.history.pushState({ path: newUrl }, '', newUrl);\n\n \/\/ ASIGNAR EL NOMBRE A LA CAJA DE TEXTO (\u00a1esto faltaba!)\n document.getElementById(\"admin-room-input\").value = randomRoom;\n\n \/\/ Mostrar el bot\u00f3n de copiar y hacer focus\n document.getElementById(\"btn-copy-link\").style.display = \"flex\";\n\n \/\/ Opcional: copiar autom\u00e1ticamente (a veces los navegadores m\u00f3viles lo bloquean si no es click directo, por eso el bot\u00f3n es clave)\n alert(\"Nueva sala creada: \" + randomRoom + \"\\n\\nPuedes usar el nuevo bot\u00f3n de 'Copiar' para llevarte el enlace y envi\u00e1rselo al paciente.\");\n }\n\n function copyRoomLink() {\n const roomName = document.getElementById(\"admin-room-input\").value.trim();\n if (!roomName) return;\n\n const base = window.location.protocol + \"\/\/\" + window.location.host + window.location.pathname;\n const fullLink = base + \"?sala=\" + roomName;\n\n navigator.clipboard.writeText(fullLink).then(() => {\n const btn = document.getElementById(\"btn-copy-link\");\n const originalHtml = btn.innerHTML;\n btn.innerHTML = '<span class=\"material-symbols-outlined\" style=\"font-size:20px;\">check<\/span>';\n btn.style.background = \"#25D366\";\n setTimeout(() => {\n btn.innerHTML = originalHtml;\n btn.style.background = \"#64748b\";\n }, 2000);\n }).catch(err => {\n \/\/ Fallback si falla el portapapeles\n alert(\"Copia este enlace manualmente: \\n\" + fullLink);\n });\n }\n\n function startAdminConsultation() {\n const room = document.getElementById(\"admin-room-input\").value.trim();\n if (!room) return alert(\"Introduce un nombre de sala\");\n CHANNEL_NAME = room;\n \n const adminBtn = document.getElementById(\"btn-admin-conectar\");\n if (adminBtn) {\n adminBtn.textContent = \"Conectando...\";\n adminBtn.disabled = true;\n adminBtn.style.opacity = \"0.7\";\n }\n\n startConsultation();\n }\n\n \/\/ Variables globales Agora\n let CHANNEL_NAME = \"\";\n let TOKEN = null;\n let MI_UID = null;\n const BACKEND_URL = \"https:\/\/agora-backend-katia1.onrender.com\";\n\n let client = AgoraRTC.createClient({ mode: \"rtc\", codec: \"vp8\" });\n let localAudioTrack, localVideoTrack;\n\n \/\/ IA y WebSockets\n let backendWs = null;\n let deepgramSocket = null;\n let sttMediaRecorder = null;\n let deepgramApiKey = null;\n let mySourceLang = \"es\";\n \n \/\/ Funci\u00f3n para mostrar los subt\u00edtulos en pantalla\n function displaySubtitle(text) {\n if (!text) return;\n if (!window.finalSubtitles) window.finalSubtitles = [];\n window.finalSubtitles.push(text);\n if (window.finalSubtitles.length > 2) { \n window.finalSubtitles.shift();\n }\n \n const overlay = document.getElementById(\"subtitles-overlay\");\n overlay.classList.remove(\"hidden\");\n overlay.style.display = \"block\";\n document.getElementById(\"subtitle-text\").innerHTML = window.finalSubtitles.join(\"<br>\");\n\n if (window.subtitleTimeout) clearTimeout(window.subtitleTimeout);\n window.subtitleTimeout = setTimeout(() => {\n window.finalSubtitles = [];\n document.getElementById(\"subtitle-text\").innerHTML = \"\";\n document.getElementById(\"subtitles-overlay\").style.display = \"none\";\n }, 7000);\n }\n \n \/\/ Iniciar Deepgram (Llamado localmente o v\u00eda comando remoto)\n async function startDeepgram() {\n if (deepgramSocket) return; \/\/ ya est\u00e1 corriendo\n \n if (!deepgramApiKey) {\n try {\n const res = await fetch(`${BACKEND_URL}\/get-ai-keys`);\n const keys = await res.json();\n deepgramApiKey = keys.deepgram;\n } catch(e) {\n console.error(\"No se pudo obtener la llave de IA\", e);\n return;\n }\n }\n \n \/\/ Averiguar el idioma correcto sin latencia si ya est\u00e1 en cach\u00e9\n try {\n if (!window.roomConfigCache) {\n const confRes = await fetch(`${BACKEND_URL}\/room-config\/${encodeURIComponent(CHANNEL_NAME)}`);\n window.roomConfigCache = await confRes.json();\n }\n mySourceLang = isAdmin ? window.roomConfigCache.doctorLang : window.roomConfigCache.patientLang;\n mySourceLang = mySourceLang.split(\"-\")[0]; \/\/ Deepgram prefiere 'es' en lugar de 'es-ES'\n } catch (e) {\n console.log(\"No se pudo obtener config de sala, usando es\");\n }\n \n const modelParam = (mySourceLang === 'es' || mySourceLang === 'en') ? '&model=nova-2' : '';\n const dgUrl = `wss:\/\/api.deepgram.com\/v1\/listen?language=${mySourceLang}${modelParam}&smart_format=true&endpointing=300`;\n deepgramSocket = new WebSocket(dgUrl, [\"token\", deepgramApiKey]);\n \n deepgramSocket.onopen = () => {\n console.log(\"Deepgram conectado en idioma:\", mySourceLang);\n if (!localAudioTrack) return;\n \n const mediaStreamTrack = localAudioTrack.getMediaStreamTrack();\n const stream = new MediaStream([mediaStreamTrack]);\n \n sttMediaRecorder = new MediaRecorder(stream);\n sttMediaRecorder.ondataavailable = (event) => {\n if (event.data.size > 0 && deepgramSocket.readyState === 1) {\n deepgramSocket.send(event.data);\n }\n };\n try {\n sttMediaRecorder.start(250);\n } catch(e) { console.error(e); }\n };\n \n deepgramSocket.onmessage = (message) => {\n const data = JSON.parse(message.data);\n if (data.channel && data.channel.alternatives[0]) {\n const transcript = data.channel.alternatives[0].transcript;\n if (transcript && data.is_final) {\n \/\/ Mandar el texto original a nuestro servidor para traducirlo y rutearlo\n if (backendWs && backendWs.readyState === 1) {\n backendWs.send(JSON.stringify({\n uid: MI_UID,\n isDoctor: isAdmin,\n text: transcript\n }));\n }\n }\n }\n };\n \n deepgramSocket.onclose = () => {\n console.log(\"Deepgram cerrado\");\n if (sttMediaRecorder && sttMediaRecorder.state !== 'inactive') {\n sttMediaRecorder.stop();\n }\n deepgramSocket = null;\n };\n }\n \n function stopDeepgram() {\n if (deepgramSocket) {\n deepgramSocket.close();\n deepgramSocket = null;\n }\n if (sttMediaRecorder && sttMediaRecorder.state !== 'inactive') {\n sttMediaRecorder.stop();\n }\n }\n\n async function startConsultation() {\n if (!isAdmin) {\n CHANNEL_NAME = document.getElementById(\"room-code-input\").value.trim().replace(\/\\s+\/g, '_');\n if (!CHANNEL_NAME) {\n alert(\"Por favor, introduce el c\u00f3digo de consulta que te envi\u00f3 tu doctora.\");\n return;\n }\n } else {\n CHANNEL_NAME = CHANNEL_NAME.replace(\/\\s+\/g, '_');\n }\n try {\n document.getElementById(\"btn-conectar-overlay\").textContent = \"Conectando...\";\n document.getElementById(\"btn-conectar-overlay\").disabled = true;\n \/\/ Ocultar selects al conectar para evitar cambios en medio de la sesi\u00f3n (opcional)\n document.getElementById(\"lang-settings\").style.opacity = \"0.5\";\n document.getElementById(\"my-language\").disabled = true;\n document.getElementById(\"sub-language\").disabled = true;\n\n \/\/ 1. REGISTRAR EVENTOS PRIMERO (Mejor pr\u00e1ctica de Agora para evitar perder se\u00f1ales)\n client.on(\"user-published\", async (user, mediaType) => {\n await client.subscribe(user, mediaType);\n if (mediaType === \"video\") {\n let playerContainer = document.getElementById(\"remote-player\");\n\n \/\/ Crear un contenedor independiente para este usuario en el Grid\n let userDivId = \"user-\" + user.uid;\n let userDiv = document.getElementById(userDivId);\n if (!userDiv) {\n userDiv = document.createElement(\"div\");\n userDiv.id = userDivId;\n userDiv.className = \"remote-video-item\";\n playerContainer.appendChild(userDiv);\n }\n user.videoTrack.play(userDivId, { fit: \"cover\" });\n }\n if (mediaType === \"audio\") {\n user.audioTrack.play();\n }\n });\n\n client.on(\"user-unpublished\", (user, mediaType) => {\n if (mediaType === \"video\") {\n let userDiv = document.getElementById(\"user-\" + user.uid);\n if (userDiv) userDiv.remove();\n }\n });\n\n \/\/ Conectar al WebSocket de nuestro Backend para mensajer\u00eda de IA\n const wsUrl = BACKEND_URL.replace(\"http\", \"ws\") + `\/ws\/subtitles\/${encodeURIComponent(CHANNEL_NAME)}`;\n backendWs = new WebSocket(wsUrl);\n \n backendWs.onmessage = (event) => {\n const data = JSON.parse(event.data);\n if (data.type === \"START_STT\") {\n startDeepgram();\n } else if (data.type === \"STOP_STT\") {\n stopDeepgram();\n } else if (data.type === \"CONFIG_UPDATE\") {\n window.roomConfigCache = data;\n } else if (data.translated || data.original) {\n \/\/ Nuevo dise\u00f1o de subt\u00edtulos tipo chat interactivo\n const soyYo = (data.uid === MI_UID);\n \n \/\/ Determinar idioma de la interfaz del usuario actual\n let langToUse = mySourceLang || 'es';\n if (window.roomConfigCache) {\n langToUse = isAdmin ? window.roomConfigCache.doctorLang.split('-')[0] : window.roomConfigCache.patientLang.split('-')[0];\n }\n\n \/\/ Mapas de traducci\u00f3n de UI seg\u00fan langToUse\n const uiDict = {\n 'es': { me: 'Yo', doc: 'Dra. Katia', pat: 'Paciente' },\n 'en': { me: 'Me', doc: 'Dr. Katia', pat: 'Patient' },\n 'fr': { me: 'Moi', doc: 'Dr. Katia', pat: 'Patient' },\n 'de': { me: 'Ich', doc: 'Dr. Katia', pat: 'Patient' },\n 'it': { me: 'Io', doc: 'Dr. Katia', pat: 'Paziente' },\n 'pt': { me: 'Eu', doc: 'Dra. Katia', pat: 'Paciente' }\n };\n \n const texts = uiDict[langToUse] || uiDict['es'];\n\n let label = \"\";\n let text = \"\";\n let textColor = \"\";\n\n if (soyYo) {\n label = texts.me;\n text = data.original; \/\/ Muestra lo que yo dije tal cual lo entendi\u00f3 la IA\n textColor = \"#1e40af\"; \/\/ Azul oscuro para que contraste en el fondo celeste\n } else {\n label = data.isDoctor ? texts.doc : texts.pat;\n text = data.translated; \/\/ Muestra la traducci\u00f3n de lo que dijo el otro\n textColor = \"#065f46\"; \/\/ Verde oscuro para el otro\n }\n \n \/\/ Agrega el texto con un estilo bonito, manteniendo el HTML para mostrar colores\n displaySubtitle(`<span style=\"color: ${textColor}; font-weight: bold;\">${label}:<\/span> <span style=\"color: #0f172a; font-weight: 600;\">${text}<\/span>`);\n }\n };\n\n backendWs.onerror = (err) => {\n console.error(\"Error en el WebSocket del servidor backend:\", err);\n document.getElementById(\"subtitle-text\").innerHTML = \"<span style='color:red;'>Error de conexi\u00f3n con el servidor de traducci\u00f3n. Verifica que Render est\u00e9 activo.<\/span>\";\n };\n\n \/\/ 2. OBTENER TOKEN Y UNIRSE A LA SALA\n MI_UID = Math.floor(Math.random() * 100000);\n const tokenResp = await fetch(`${BACKEND_URL}\/generate-token?channelName=${encodeURIComponent(CHANNEL_NAME)}&uid=${MI_UID}`);\n if (!tokenResp.ok) throw new Error(\"Fallo al obtener el token de seguridad\");\n\n const tokenData = await tokenResp.json();\n TOKEN = tokenData.token;\n\n await client.join(AGORA_APP_ID, CHANNEL_NAME, TOKEN, MI_UID);\n document.getElementById(\"room-status\").innerText = \"Conectado a la sala virtual\";\n\n document.getElementById(\"welcome-overlay\").style.display = \"none\";\n document.getElementById(\"btn-salir\").style.display = \"inline-block\";\n document.getElementById(\"floating-controls\").style.display = \"flex\";\n\n \/\/ 3. PUBLICAR C\u00c1MARA Y MICR\u00d3FONO\n [localAudioTrack, localVideoTrack] = await AgoraRTC.createMicrophoneAndCameraTracks();\n localVideoTrack.play(\"local-player\", { fit: \"cover\" });\n await client.publish([localAudioTrack, localVideoTrack]);\n\n } catch (error) {\n console.error(\"Error al conectar la videoconsulta:\", error);\n document.getElementById(\"room-status\").innerText = \"Error de conexi\u00f3n o permisos denegados\";\n document.getElementById(\"btn-conectar-overlay\").textContent = \"Reintentar Conexi\u00f3n\";\n document.getElementById(\"btn-conectar-overlay\").disabled = false;\n \n const adminBtn = document.getElementById(\"btn-admin-conectar\");\n if (adminBtn) {\n adminBtn.textContent = \"Entrar a Sala\";\n adminBtn.disabled = false;\n adminBtn.style.opacity = \"1\";\n }\n }\n }\n\n async function leaveConsultation() {\n localAudioTrack && localAudioTrack.close();\n localVideoTrack && localVideoTrack.close();\n await client.leave();\n\n document.getElementById(\"local-player\").innerHTML = \"\";\n document.getElementById(\"remote-player\").innerHTML = \"\";\n document.getElementById(\"room-status\").innerText = \"Desconectado\";\n document.getElementById(\"btn-salir\").style.display = \"none\";\n document.getElementById(\"floating-controls\").style.display = \"none\";\n\n document.getElementById(\"welcome-overlay\").style.display = \"flex\";\n document.getElementById(\"btn-conectar-overlay\").textContent = \"Entrar a la Consulta\";\n document.getElementById(\"btn-conectar-overlay\").disabled = false;\n\n const adminBtn = document.getElementById(\"btn-admin-conectar\");\n if (adminBtn) {\n adminBtn.textContent = \"Entrar a Sala\";\n adminBtn.disabled = false;\n adminBtn.style.opacity = \"1\";\n }\n\n \/\/ Reactivar controles de idioma\n document.getElementById(\"lang-settings\").style.opacity = \"1\";\n document.getElementById(\"my-language\").disabled = false;\n document.getElementById(\"sub-language\").disabled = false;\n }\n\n function toggleFullScreen() {\n const container = document.getElementById(\"main-video-container\");\n if (!document.fullscreenElement && !document.webkitFullscreenElement) {\n if (container.requestFullscreen) {\n container.requestFullscreen();\n } else if (container.webkitRequestFullscreen) {\n container.webkitRequestFullscreen();\n }\n } else {\n if (document.exitFullscreen) {\n document.exitFullscreen();\n } else if (document.webkitExitFullscreen) {\n document.webkitExitFullscreen();\n }\n }\n }\n\n async function toggleSubtitles() {\n const subs = document.getElementById(\"subtitles-overlay\");\n const btn = document.getElementById(\"btn-cc\");\n const isActivating = subs.classList.contains(\"hidden\");\n\n subs.classList.toggle(\"hidden\");\n btn.classList.toggle(\"active\");\n\n if (isActivating) {\n document.getElementById(\"subtitle-text\").innerText = \"Iniciando IA...\";\n try {\n const spokenLang = document.getElementById(\"my-language\").value;\n const subtitleLang = document.getElementById(\"sub-language\").value;\n \n \/\/ 1. Guardar la configuraci\u00f3n en el backend\n await fetch(`${BACKEND_URL}\/start-subtitles`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application\/json\" },\n body: JSON.stringify({ \n channelName: CHANNEL_NAME, \n spokenLang, \n subtitleLang\n })\n });\n \n \/\/ 2. Avisar a todos los conectados en la sala que activen su micr\u00f3fono STT\n if (backendWs && backendWs.readyState === 1) {\n backendWs.send(JSON.stringify({ type: \"START_STT\" }));\n }\n \n document.getElementById(\"subtitle-text\").innerText = \"IA conectada. Escuchando...\";\n } catch (e) {\n console.error(e);\n document.getElementById(\"subtitle-text\").innerText = \"Error al conectar IA: \" + e.message;\n }\n } else {\n try {\n \/\/ Avisar a todos que apaguen su IA\n if (backendWs && backendWs.readyState === 1) {\n backendWs.send(JSON.stringify({ type: \"STOP_STT\" }));\n }\n document.getElementById(\"subtitle-text\").innerText = \"\";\n } catch (e) {\n console.error(\"Error al desconectar IA:\", e);\n }\n }\n }\n \n async function syncLanguages() {\n \/\/ Si la IA est\u00e1 activa, reiniciarla para aplicar los nuevos idiomas a ambos\n const subs = document.getElementById(\"subtitles-overlay\");\n const isActivating = !subs.classList.contains(\"hidden\");\n if (isActivating && CHANNEL_NAME) {\n const spokenLang = document.getElementById(\"my-language\").value;\n const subtitleLang = document.getElementById(\"sub-language\").value;\n \n await fetch(`${BACKEND_URL}\/start-subtitles`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application\/json\" },\n body: JSON.stringify({ \n channelName: CHANNEL_NAME, \n spokenLang, \n subtitleLang\n })\n });\n \n \/\/ Enviar evento de reinicio a la sala\n if (backendWs && backendWs.readyState === 1) {\n backendWs.send(JSON.stringify({ type: \"STOP_STT\" }));\n setTimeout(() => {\n backendWs.send(JSON.stringify({ type: \"START_STT\" }));\n }, 500);\n }\n }\n }\n\n let isMicMuted = false;\n let isCamMuted = false;\n\n async function toggleMic() {\n if (!localAudioTrack) return;\n isMicMuted = !isMicMuted;\n await localAudioTrack.setMuted(isMicMuted);\n const btn = document.getElementById(\"btn-mic\");\n btn.style.backgroundColor = isMicMuted ? \"#ef4444\" : \"\";\n btn.style.borderColor = isMicMuted ? \"#ef4444\" : \"\";\n \/\/ Opcional: tachar el texto o cambiarlo\n btn.style.textDecoration = isMicMuted ? \"line-through\" : \"none\";\n }\n\n async function toggleCam() {\n if (!localVideoTrack) return;\n isCamMuted = !isCamMuted;\n await localVideoTrack.setMuted(isCamMuted);\n const btn = document.getElementById(\"btn-cam\");\n btn.style.backgroundColor = isCamMuted ? \"#ef4444\" : \"\";\n btn.style.borderColor = isCamMuted ? \"#ef4444\" : \"\";\n \/\/ Opcional: tachar el texto o cambiarlo\n btn.style.textDecoration = isCamMuted ? \"line-through\" : \"none\";\n }\n\n let currentCamFacingMode = \"user\"; \/\/ \"user\" (frontal) o \"environment\" (trasera)\n\n async function flipCamera() {\n if (!localVideoTrack) return;\n try {\n currentCamFacingMode = currentCamFacingMode === \"user\" ? \"environment\" : \"user\";\n \n \/\/ Creamos un nuevo track de video con la nueva c\u00e1mara\n const newVideoTrack = await AgoraRTC.createCameraVideoTrack({ facingMode: currentCamFacingMode });\n \n \/\/ Reemplazar el track en la llamada sin que se corte\n await client.unpublish(localVideoTrack);\n localVideoTrack.close();\n \n localVideoTrack = newVideoTrack;\n document.getElementById(\"local-player\").innerHTML = \"\"; \/\/ Limpiar el anterior\n localVideoTrack.play(\"local-player\", { fit: \"cover\" });\n await client.publish(localVideoTrack);\n } catch (err) {\n console.error(\"Error al voltear la c\u00e1mara:\", err);\n \/\/ Si falla (ej. PC sin c\u00e1mara trasera), restaurar el estado\n currentCamFacingMode = currentCamFacingMode === \"user\" ? \"environment\" : \"user\";\n alert(\"Tu dispositivo no soporta el cambio de c\u00e1mara.\");\n }\n }\n <\/script>\n\n<\/body>\n\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Videoconsulta Pedi\u00e1trica – KatiaTuPediatra Sobre M\u00ed Servicios y Tarifas Consejos Agendar Cita Aseguradoras Videoconsulta Pedi\u00e1trica Online Conecta en tiempo real…<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"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":"","ast-disable-related-posts":"","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-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":"","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-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":"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":""},"mobile":{"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":""}},"footnotes":""},"class_list":["post-1551","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/katiatupediatra.es\/en\/wp-json\/wp\/v2\/pages\/1551","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/katiatupediatra.es\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/katiatupediatra.es\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/katiatupediatra.es\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/katiatupediatra.es\/en\/wp-json\/wp\/v2\/comments?post=1551"}],"version-history":[{"count":139,"href":"https:\/\/katiatupediatra.es\/en\/wp-json\/wp\/v2\/pages\/1551\/revisions"}],"predecessor-version":[{"id":1702,"href":"https:\/\/katiatupediatra.es\/en\/wp-json\/wp\/v2\/pages\/1551\/revisions\/1702"}],"wp:attachment":[{"href":"https:\/\/katiatupediatra.es\/en\/wp-json\/wp\/v2\/media?parent=1551"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}