{"id":903,"date":"2025-11-22T11:34:12","date_gmt":"2025-11-22T11:34:12","guid":{"rendered":"https:\/\/nb-consulting.pro\/?page_id=903"},"modified":"2025-11-22T11:35:46","modified_gmt":"2025-11-22T11:35:46","slug":"playback","status":"publish","type":"page","link":"https:\/\/nb-consulting.pro\/en\/playback\/","title":{"rendered":"Playback"},"content":{"rendered":"    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n    <link\r\n        href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap\"\r\n        rel=\"stylesheet\">\r\n\r\n    <style>\r\n        \/* --- VARIABLES & RESET --- *\/\r\n        :root {\r\n            --font-ui: 'Inter', sans-serif;\r\n            --font-mono: 'JetBrains Mono', 'Consolas', monospace;\r\n            --color-bg-dark: #0f172a;\r\n            --color-bg-glass: rgba(15, 23, 42, 0.65);\r\n            --color-text-primary: #f8fafc;\r\n            --color-text-secondary: #94a3b8;\r\n            --color-accent: #22c55e;\r\n            --color-accent-blue: #3b82f6;\r\n            --color-accent-purple: #a855f7;\r\n            --color-accent-orange: #f97316;\r\n            --color-border: rgba(148, 163, 184, 0.1);\r\n        }\r\n\r\n        \/* --- ESTILOS GLOBALES PARA LA P\u00c1GINA --- *\/\r\n        body {\r\n            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;\r\n            color: #f8fafc !important;\r\n            min-height: 100vh;\r\n        }\r\n\r\n        \/* T\u00edtulo de la p\u00e1gina *\/\r\n        .entry-title,\r\n        h1.entry-title,\r\n        .page-title,\r\n        h1 {\r\n            color: #f8fafc !important;\r\n            text-align: center;\r\n            font-family: 'Inter', sans-serif !important;\r\n            font-weight: 600;\r\n            margin-bottom: 20px;\r\n            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\r\n        }\r\n\r\n        \/* Contenedor principal de WordPress *\/\r\n        .entry-content,\r\n        .site-content,\r\n        article,\r\n        main {\r\n            background: transparent !important;\r\n        }\r\n\r\n        \/* Ocultar elementos innecesarios del tema *\/\r\n        .entry-meta,\r\n        .entry-footer,\r\n        .post-navigation {\r\n            display: none !important;\r\n        }\r\n\r\n        \/* --- AIRCRAFT LABELS --- *\/\r\n        .aircraft-label {\r\n            font-family: var(--font-mono) !important;\r\n            font-size: 11px;\r\n            line-height: 1.3;\r\n            color: #ffffff !important;\r\n            background: rgba(15, 23, 42, 0.3);\r\n            backdrop-filter: blur(1px);\r\n            padding: 4px 8px;\r\n            border-radius: 4px;\r\n            border: 1px solid transparent;\r\n            border-left: 2px solid transparent;\r\n            transition: all 0.2s ease-out;\r\n            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);\r\n            user-select: none;\r\n            cursor: grab;\r\n        }\r\n\r\n        .aircraft-label b {\r\n            color: #ffffff !important;\r\n            font-weight: 700;\r\n            font-size: 12px;\r\n            display: block;\r\n            margin-bottom: 2px;\r\n        }\r\n\r\n        .aircraft-label .flight-data div {\r\n            color: #e2e8f0 !important;\r\n        }\r\n\r\n        .aircraft-label:hover {\r\n            background: rgba(15, 23, 42, 0.85) !important;\r\n            backdrop-filter: blur(8px);\r\n            border: 1px solid rgba(34, 197, 94, 0.5);\r\n            border-left: 3px solid #22c55e;\r\n            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), 0 0 10px rgba(34, 197, 94, 0.2);\r\n            transform: scale(1.05);\r\n            z-index: 10000;\r\n            cursor: grabbing;\r\n        }\r\n\r\n        \/* --- CONTROLES MODERNOS --- *\/\r\n        #playback-container {\r\n            font-family: var(--font-ui);\r\n            color: var(--color-text-primary);\r\n        }\r\n\r\n        #playback-controls {\r\n            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);\r\n            padding: 20px;\r\n            border-radius: 12px;\r\n            border: 1px solid #334155;\r\n            margin-bottom: 15px;\r\n            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);\r\n            position: relative;\r\n        }\r\n\r\n        .control-row {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 12px;\r\n            margin-bottom: 12px;\r\n            flex-wrap: wrap;\r\n        }\r\n\r\n        .control-group {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 4px !important;\r\n            background: rgba(30, 41, 59, 0.5);\r\n            padding: 2px 6px !important;\r\n            border-radius: 4px;\r\n            border: 1px solid rgba(71, 85, 105, 0.3);\r\n            height: 26px !important;\r\n            \/* Altura fija para alinear todo *\/\r\n        }\r\n\r\n        label {\r\n            font-size: 12px;\r\n            color: #f8fafc !important;\r\n            font-weight: 500;\r\n            white-space: nowrap;\r\n        }\r\n\r\n        select,\r\n        input[type=\"datetime-local\"],\r\n        input[type=\"number\"] {\r\n            background: #1e293b;\r\n            color: #fff;\r\n            border: 1px solid #475569;\r\n            padding: 6px 10px;\r\n            border-radius: 6px;\r\n            font-family: var(--font-mono);\r\n            font-size: 12px;\r\n            transition: all 0.2s;\r\n        }\r\n\r\n        select:focus,\r\n        input:focus {\r\n            outline: none;\r\n            border-color: var(--color-accent);\r\n            box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.1);\r\n        }\r\n\r\n        input[type=\"number\"] {\r\n            width: 70px;\r\n        }\r\n\r\n        \/* --- BOTONES MEJORADOS --- *\/\r\n        button {\r\n            background: linear-gradient(135deg, #334155 0%, #475569 100%);\r\n            color: #fff;\r\n            border: none;\r\n            padding: 8px 16px;\r\n            border-radius: 6px;\r\n            cursor: pointer;\r\n            font-family: var(--font-ui);\r\n            font-weight: 500;\r\n            font-size: 12px;\r\n            transition: all 0.2s;\r\n            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        button::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            width: 0;\r\n            height: 0;\r\n            border-radius: 50%;\r\n            background: rgba(255, 255, 255, 0.1);\r\n            transform: translate(-50%, -50%);\r\n            transition: width 0.3s, height 0.3s;\r\n        }\r\n\r\n        button:hover::before {\r\n            width: 300px;\r\n            height: 300px;\r\n        }\r\n\r\n        button:hover {\r\n            transform: translateY(-1px);\r\n            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);\r\n        }\r\n\r\n        button:active {\r\n            transform: translateY(0);\r\n        }\r\n\r\n        button:disabled {\r\n            opacity: 0.4;\r\n            cursor: not-allowed;\r\n            transform: none;\r\n        }\r\n\r\n        button:disabled:hover {\r\n            transform: none;\r\n            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\r\n        }\r\n\r\n        .tool-btn {\r\n            min-width: 100px;\r\n            font-weight: 600;\r\n        }\r\n\r\n        #btn-rbl.active {\r\n            background: linear-gradient(135deg, var(--color-accent-blue) 0%, #2563eb 100%);\r\n            box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);\r\n        }\r\n\r\n        #btn-cpa.active {\r\n            background: linear-gradient(135deg, var(--color-accent-purple) 0%, #9333ea 100%);\r\n            box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);\r\n        }\r\n\r\n        #load-playback-data {\r\n            background: linear-gradient(135deg, var(--color-accent) 0%, #16a34a 100%);\r\n            font-weight: 600;\r\n            padding: 10px 20px;\r\n        }\r\n\r\n        #play-pause-button {\r\n            background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);\r\n            font-weight: 600;\r\n            min-width: 80px;\r\n        }\r\n\r\n        #playback-apply-filter {\r\n            background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%);\r\n        }\r\n\r\n        #playback-apply-filter.active {\r\n            background: linear-gradient(135deg, #be123c 0%, #e11d48 100%);\r\n        }\r\n\r\n        .status-bar {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 15px;\r\n            padding: 10px 15px;\r\n            background: rgba(30, 41, 59, 0.3);\r\n            border-radius: 6px;\r\n            border: 1px solid rgba(71, 85, 105, 0.2);\r\n            margin-top: 12px;\r\n        }\r\n\r\n        #playback-status {\r\n            color: var(--color-text-secondary);\r\n            font-size: 12px;\r\n        }\r\n\r\n        #simulation-time {\r\n            color: var(--color-accent);\r\n            font-family: var(--font-mono);\r\n            font-size: 13px;\r\n            font-weight: 600;\r\n        }\r\n\r\n        #playback-map-div {\r\n            height: 700px;\r\n            width: 100%;\r\n            border: 1px solid #334155;\r\n            background: #000;\r\n            border-radius: 8px;\r\n            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);\r\n        }\r\n\r\n        #progress-bar-container {\r\n            display: none;\r\n            position: absolute;\r\n            bottom: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 4px;\r\n            background-color: #334155;\r\n            overflow: hidden;\r\n            border-radius: 0 0 12px 12px;\r\n        }\r\n\r\n        #progress-bar {\r\n            width: 0%;\r\n            height: 100%;\r\n            background: linear-gradient(90deg, var(--color-accent) 0%, #16a34a 100%);\r\n            transition: width 0.5s ease-in-out;\r\n            box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);\r\n        }\r\n\r\n        \/* --- FIX PARA CONTROL DE CAPAS DE LEAFLET --- *\/\r\n        .leaflet-control-layers {\r\n            background: rgba(15, 23, 42, 0.95) !important;\r\n            color: #f8fafc !important;\r\n            border: 1px solid #475569 !important;\r\n            \/* NEW \u2013 make it sit above the floating buttons *\/\r\n            z-index: 2000;\r\n            \/* <-- add this line *\/\r\n        }\r\n\r\n        .leaflet-control-layers-toggle {\r\n            background-color: rgba(15, 23, 42, 0.95) !important;\r\n        }\r\n\r\n        .leaflet-control-layers-list {\r\n            color: #f8fafc !important;\r\n        }\r\n\r\n        .leaflet-control-layers label {\r\n            color: #f8fafc !important;\r\n        }\r\n\r\n        .leaflet-control-layers-separator {\r\n            border-top: 1px solid #475569 !important;\r\n        }\r\n\r\n\r\n        .floating-tools {\r\n            position: absolute;\r\n            top: 180px;\r\n            right: 10px;\r\n            z-index: 1500;\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 8px;\r\n        }\r\n\r\n        .floating-btn {\r\n            background: rgba(15, 23, 42, 0.9) !important;\r\n            backdrop-filter: blur(10px);\r\n            color: #f8fafc !important;\r\n            border: 1px solid rgba(148, 163, 184, 0.2) !important;\r\n            padding: 10px 16px !important;\r\n            border-radius: 8px !important;\r\n            cursor: pointer;\r\n            font-family: var(--font-ui) !important;\r\n            font-weight: 600 !important;\r\n            font-size: 13px !important;\r\n            transition: all 0.2s ease !important;\r\n            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;\r\n            min-width: 90px !important;\r\n            text-align: left;\r\n        }\r\n\r\n        .floating-btn:hover {\r\n            background: rgba(30, 41, 59, 0.95) !important;\r\n            border-color: var(--color-accent) !important;\r\n            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(34, 197, 94, 0.2) !important;\r\n            transform: translateX(-2px) !important;\r\n        }\r\n\r\n        .floating-btn.active {\r\n            background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(22, 163, 74, 0.3) 100%) !important;\r\n            border-color: var(--color-accent) !important;\r\n            box-shadow: 0 0 20px rgba(34, 197, 94, 0.4) !important;\r\n        }\r\n\r\n        #btn-rbl.active {\r\n            background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(37, 99, 235, 0.4) 100%) !important;\r\n            border-color: var(--color-accent-blue) !important;\r\n            box-shadow: 0 0 20px rgba(59, 130, 246, 0.5) !important;\r\n        }\r\n\r\n        #btn-cpa.active {\r\n            background: linear-gradient(135deg, rgba(168, 85, 247, 0.3) 0%, rgba(147, 51, 234, 0.4) 100%) !important;\r\n            border-color: var(--color-accent-purple) !important;\r\n            box-shadow: 0 0 20px rgba(168, 85, 247, 0.5) !important;\r\n        }\r\n\r\n        \/* ========================================== *\/\r\n        \/* TUTORIAL OVERLAY *\/\r\n        \/* ========================================== *\/\r\n\r\n        .tutorial-overlay {\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: rgba(0, 0, 0, 0.75);\r\n            z-index: 9998;\r\n            display: none;\r\n        }\r\n\r\n        .tutorial-overlay.active {\r\n            display: block;\r\n        }\r\n\r\n        .tutorial-spotlight {\r\n            position: absolute;\r\n            border: 8px solid #22c55e;\r\n            border-radius: 12px;\r\n            box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.75);\r\n            \/* Este es el \u00fanico que oscurece *\/\r\n            pointer-events: none;\r\n            transition: all 0.4s ease;\r\n            z-index: 9999;\r\n            background: radial-gradient(circle at center,\r\n                    rgba(255, 255, 255, 0.25) 0%,\r\n                    rgba(255, 255, 255, 0.15) 50%,\r\n                    rgba(255, 255, 255, 0.05) 100%);\r\n            outline: 3px solid rgba(34, 197, 94, 0.6);\r\n            outline-offset: 4px;\r\n        }\r\n\r\n        \/* Asegurar alto contraste en elementos destacados *\/\r\n        .tutorial-highlight-element {\r\n            position: relative !important;\r\n        }\r\n\r\n        .tutorial-highlight-element button {\r\n            background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%) !important;\r\n            color: #ffffff !important;\r\n            border: 3px solid #22c55e !important;\r\n            font-weight: 700 !important;\r\n            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;\r\n            box-shadow: 0 0 20px rgba(34, 197, 94, 0.6) !important;\r\n        }\r\n\r\n        .tutorial-highlight-element input,\r\n        .tutorial-highlight-element select {\r\n            background: #ffffff !important;\r\n            color: #0f172a !important;\r\n            border: 3px solid #22c55e !important;\r\n            font-weight: 600 !important;\r\n        }\r\n\r\n        .tutorial-highlight-element label {\r\n            color: #ffffff !important;\r\n            font-weight: 700 !important;\r\n            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(34, 197, 94, 0.8) !important;\r\n            background: rgba(0, 0, 0, 0.3) !important;\r\n            padding: 4px 8px !important;\r\n            border-radius: 4px !important;\r\n        }\r\n\r\n        .tutorial-highlight-element .control-group {\r\n            background: rgba(15, 23, 42, 0.95) !important;\r\n            border: 3px solid #22c55e !important;\r\n            box-shadow: 0 0 30px rgba(34, 197, 94, 0.5) !important;\r\n        }\r\n\r\n        .tutorial-tooltip {\r\n            position: fixed;\r\n            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);\r\n            color: #f8fafc;\r\n            padding: 24px;\r\n            border-radius: 12px;\r\n            border: 2px solid var(--color-accent);\r\n            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(34, 197, 94, 0.3);\r\n            max-width: 400px;\r\n            z-index: 10001;\r\n            font-family: var(--font-ui);\r\n        }\r\n\r\n        .tutorial-tooltip h3 {\r\n            margin: 0 0 12px 0;\r\n            color: var(--color-accent);\r\n            font-size: 18px;\r\n            font-weight: 600;\r\n        }\r\n\r\n        .tutorial-tooltip p {\r\n            margin: 0 0 20px 0;\r\n            line-height: 1.6;\r\n            font-size: 14px;\r\n            color: #e2e8f0;\r\n        }\r\n\r\n        .tutorial-tooltip .tutorial-step-counter {\r\n            font-size: 12px;\r\n            color: var(--color-text-secondary);\r\n            margin-bottom: 8px;\r\n            font-weight: 500;\r\n        }\r\n\r\n        .tutorial-buttons {\r\n            display: flex;\r\n            gap: 10px;\r\n            justify-content: flex-end;\r\n        }\r\n\r\n        .tutorial-btn {\r\n            padding: 10px 20px;\r\n            border: none;\r\n            border-radius: 6px;\r\n            cursor: pointer;\r\n            font-family: var(--font-ui);\r\n            font-weight: 600;\r\n            font-size: 13px;\r\n            transition: all 0.2s;\r\n        }\r\n\r\n        .tutorial-btn-skip {\r\n            background: rgba(148, 163, 184, 0.2);\r\n            color: #94a3b8;\r\n        }\r\n\r\n        .tutorial-btn-skip:hover {\r\n            background: rgba(148, 163, 184, 0.3);\r\n            color: #f8fafc;\r\n        }\r\n\r\n        .tutorial-btn-next {\r\n            background: linear-gradient(135deg, var(--color-accent) 0%, #16a34a 100%);\r\n            color: #fff;\r\n        }\r\n\r\n        .tutorial-btn-next:hover {\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);\r\n        }\r\n\r\n        \/* Responsive para m\u00f3viles *\/\r\n        @media (max-width: 768px) {\r\n            .tutorial-tooltip {\r\n                max-width: 90%;\r\n                padding: 20px;\r\n                left: 5% !important;\r\n                right: 5% !important;\r\n                top: auto !important;\r\n                bottom: 20px !important;\r\n                max-height: 50vh;\r\n                overflow-y: auto;\r\n            }\r\n\r\n            .tutorial-overlay {\r\n                overflow-y: auto;\r\n            }\r\n        }\r\n\r\n\r\n        \/* ========================================== *\/\r\n        \/* RESPONSIVE DESIGN PARA M\u00d3VILES *\/\r\n        \/* ========================================== *\/\r\n\r\n        \/* Tablets y m\u00f3viles en landscape *\/\r\n        @media (max-width: 1024px) {\r\n            #playback-controls {\r\n                padding: 16px;\r\n            }\r\n\r\n            .control-row {\r\n                gap: 10px;\r\n            }\r\n\r\n            button {\r\n                font-size: 13px;\r\n                padding: 10px 14px;\r\n            }\r\n        }\r\n\r\n        \/* M\u00f3viles en portrait *\/\r\n        @media (max-width: 768px) {\r\n            #playback-container {\r\n                padding: 0;\r\n            }\r\n\r\n            #playback-controls {\r\n                padding: 12px;\r\n                border-radius: 8px;\r\n                margin-bottom: 10px;\r\n            }\r\n\r\n            .control-row {\r\n                flex-direction: column;\r\n                gap: 8px;\r\n                margin-bottom: 10px;\r\n            }\r\n\r\n            .control-group {\r\n                width: 100%;\r\n                padding: 8px 12px;\r\n            }\r\n\r\n            label {\r\n                font-size: 13px !important;\r\n            }\r\n\r\n            select,\r\n            input[type=\"datetime-local\"],\r\n            input[type=\"number\"] {\r\n                width: 100%;\r\n                font-size: 14px;\r\n                padding: 10px;\r\n            }\r\n\r\n            button {\r\n                width: 100%;\r\n                padding: 14px 16px;\r\n                font-size: 14px;\r\n                min-width: unset;\r\n            }\r\n\r\n            .tool-btn {\r\n                min-width: unset;\r\n            }\r\n\r\n            #playback-map-div {\r\n                height: 60vh;\r\n                border-radius: 6px;\r\n            }\r\n\r\n            .status-bar {\r\n                flex-direction: column;\r\n                align-items: flex-start;\r\n                gap: 8px;\r\n            }\r\n\r\n            #simulation-time {\r\n                margin-left: 0 !important;\r\n                font-size: 14px;\r\n            }\r\n\r\n            #playback-status {\r\n                font-size: 13px;\r\n            }\r\n\r\n            .aircraft-label {\r\n                font-size: 12px;\r\n                padding: 6px 10px;\r\n            }\r\n\r\n            .aircraft-label b {\r\n                font-size: 13px;\r\n            }\r\n        }\r\n\r\n        \/* M\u00f3viles peque\u00f1os *\/\r\n        @media (max-width: 480px) {\r\n            #playback-controls {\r\n                padding: 10px;\r\n            }\r\n\r\n            .control-group {\r\n                padding: 6px 10px;\r\n            }\r\n\r\n            label {\r\n                font-size: 12px !important;\r\n            }\r\n\r\n            select,\r\n            input[type=\"datetime-local\"],\r\n            input[type=\"number\"] {\r\n                font-size: 13px;\r\n                padding: 8px;\r\n            }\r\n\r\n            button {\r\n                padding: 12px 14px;\r\n                font-size: 13px;\r\n            }\r\n\r\n            #playback-map-div {\r\n                height: 55vh;\r\n            }\r\n\r\n            .aircraft-label {\r\n                font-size: 10px;\r\n                padding: 4px 8px;\r\n            }\r\n\r\n            .aircraft-label b {\r\n                font-size: 11px;\r\n            }\r\n\r\n            .tool-btn {\r\n                font-size: 12px;\r\n            }\r\n        }\r\n\r\n        \/* Ajustes para landscape en m\u00f3viles *\/\r\n        @media (max-height: 500px) and (orientation: landscape) {\r\n            #playback-map-div {\r\n                height: 70vh;\r\n            }\r\n\r\n            #playback-controls {\r\n                padding: 8px;\r\n            }\r\n\r\n            .control-row {\r\n                margin-bottom: 6px;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n    <div id=\"playback-container\">\r\n        <div id=\"playback-controls\">\r\n            <!-- Fila 1: Carga de datos -->\r\n            <div class=\"control-row\">\r\n                <div class=\"control-group\">\r\n                    <label for=\"start-datetime\">Start (UTC):<\/label>\r\n                    <input type=\"datetime-local\" id=\"start-datetime\">\r\n                <\/div>\r\n\r\n                <div class=\"control-group\">\r\n                    <label for=\"duration-minutes\">Duration:<\/label>\r\n                    <select id=\"duration-minutes\">\r\n                        <option value=\"15\">15 min<\/option>\r\n                        <option value=\"30\" selected>30 min<\/option>\r\n                        <option value=\"60\">1 hora<\/option>\r\n                        <option value=\"120\">2 horas<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n\r\n                <button id=\"load-playback-data\">\ud83d\udce5 Load Flights<\/button>\r\n            <\/div>\r\n\r\n            <!-- Fila 2: Filtros de altitud -->\r\n            <div class=\"control-row\">\r\n                <div class=\"control-group\">\r\n                    <label><\/label>\r\n\r\n                    <input type=\"number\" id=\"playback-fl-min\" value=\"0\" min=\"0\" max=\"999\" step=\"10\">\r\n\r\n                    <label>FL Max:<\/label>\r\n                    <input type=\"number\" id=\"playback-fl-max\" value=\"999\" min=\"0\" max=\"999\" step=\"10\">\r\n\r\n                    <button id=\"playback-apply-filter\">\ud83d\udd0d Filter<\/button>\r\n\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <hr style=\"border: none; border-top: 1px solid #334155; margin: 15px 0;\">\r\n\r\n            <!-- Fila 3: Controles de reproducci\u00f3n -->\r\n            <div class=\"control-row\">\r\n                <button id=\"play-pause-button\" disabled>\u25b6 Play<\/button>\r\n\r\n                <div class=\"control-group\">\r\n                    <label for=\"playback-speed\">Speed:<\/label>\r\n                    <select id=\"playback-speed\" disabled>\r\n                        <option value=\"1\">x1<\/option>\r\n                        <option value=\"2\">x2<\/option>\r\n                        <option value=\"4\">x4<\/option>\r\n                        <option value=\"8\">x8<\/option>\r\n                        <option value=\"16\">x16<\/option>\r\n                        <option value=\"32\">x32<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n\r\n                <div class=\"control-group\">\r\n                    <label for=\"vector-duration\">Vector:<\/label>\r\n                    <select id=\"vector-duration\">\r\n                        <option value=\"0\">Off<\/option>\r\n                        <option value=\"1\">1 min<\/option>\r\n                        <option value=\"2\" selected>2 min<\/option>\r\n                        <option value=\"3\">3 min<\/option>\r\n                        <option value=\"5\">5 min<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Fila 4: Herramientas -->\r\n\r\n\r\n            <!-- Barra de estado -->\r\n            <div class=\"status-bar\">\r\n                <span id=\"playback-status\">Status: Waiting...<\/span>\r\n                <b id=\"simulation-time\" style=\"margin-left: auto;\">UTC: --:--:--<\/b>\r\n            <\/div>\r\n\r\n            <div id=\"progress-bar-container\">\r\n                <div id=\"progress-bar\"><\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div id=\"playback-map-div\" style=\"position: relative;\">\r\n            <!-- Botones flotantes sobre el mapa -->\r\n            <div class=\"floating-tools\">\r\n                <button id=\"btn-rbl\" class=\"floating-btn\" title=\"Range & Bearing Line\">\ud83d\udccf RBL<\/button>\r\n                <button id=\"btn-cpa\" class=\"floating-btn\" title=\"Closest Point of Approach\">\u2716\ufe0f CPA<\/button>\r\n            <\/div>\r\n            <!-- Tutorial Overlay -->\r\n            <div class=\"tutorial-overlay\" id=\"tutorial-overlay\">\r\n                <div class=\"tutorial-spotlight\" id=\"tutorial-spotlight\"><\/div>\r\n            <\/div>\r\n            <div class=\"tutorial-tooltip\" id=\"tutorial-tooltip\" style=\"display: none;\">\r\n                <div class=\"tutorial-step-counter\" id=\"tutorial-counter\"><\/div>\r\n                <h3 id=\"tutorial-title\"><\/h3>\r\n                <p id=\"tutorial-description\"><\/p>\r\n                <div class=\"tutorial-buttons\">\r\n                    <button class=\"tutorial-btn tutorial-btn-skip\" id=\"tutorial-skip\">Saltar tutorial<\/button>\r\n                    <button class=\"tutorial-btn tutorial-btn-next\" id=\"tutorial-next\">Siguiente<\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div> <!-- <<<< ESTE DIV CIERRA EL CONTENEDOR PRINCIPAL -->\r\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"off","neve_meta_content_width":100,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"class_list":["post-903","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Playback - NB Consulting<\/title>\n<meta name=\"description\" content=\"La funcionaldiad playback permite visualizar transito aereo historico con las mismas funcionalidades que si lo estuviesemos viendo en tiempo real.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/nb-consulting.pro\/en\/playback\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Playback - NB Consulting\" \/>\n<meta property=\"og:description\" content=\"La funcionaldiad playback permite visualizar transito aereo historico con las mismas funcionalidades que si lo estuviesemos viendo en tiempo real.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/nb-consulting.pro\/en\/playback\/\" \/>\n<meta property=\"og:site_name\" content=\"NB Consulting\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-22T11:35:46+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/nb-consulting.pro\/playback\/\",\"url\":\"https:\/\/nb-consulting.pro\/playback\/\",\"name\":\"Playback - NB Consulting\",\"isPartOf\":{\"@id\":\"https:\/\/nb-consulting.pro\/#website\"},\"datePublished\":\"2025-11-22T11:34:12+00:00\",\"dateModified\":\"2025-11-22T11:35:46+00:00\",\"description\":\"La funcionaldiad playback permite visualizar transito aereo historico con las mismas funcionalidades que si lo estuviesemos viendo en tiempo real.\",\"breadcrumb\":{\"@id\":\"https:\/\/nb-consulting.pro\/playback\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/nb-consulting.pro\/playback\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/nb-consulting.pro\/playback\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/nb-consulting.pro\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Playback\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/nb-consulting.pro\/#website\",\"url\":\"https:\/\/nb-consulting.pro\/\",\"name\":\"NB Consulting\",\"description\":\"Consultor&iacute;a especializada en navegaci&oacute;n a&eacute;rea y formaci&oacute;n profesional en gesti&oacute;n del tr&aacute;fico a&eacute;reo (ATM). Ofrecemos soluciones personalizadas para mejorar la eficiencia, seguridad y sostenibilidad en ANSPs, aeropuertos y aerol&iacute;neas.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/nb-consulting.pro\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Playback - NB Consulting","description":"La funcionaldiad playback permite visualizar transito aereo historico con las mismas funcionalidades que si lo estuviesemos viendo en tiempo real.","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:\/\/nb-consulting.pro\/en\/playback\/","og_locale":"en_GB","og_type":"article","og_title":"Playback - NB Consulting","og_description":"La funcionaldiad playback permite visualizar transito aereo historico con las mismas funcionalidades que si lo estuviesemos viendo en tiempo real.","og_url":"https:\/\/nb-consulting.pro\/en\/playback\/","og_site_name":"NB Consulting","article_modified_time":"2025-11-22T11:35:46+00:00","twitter_card":"summary_large_image","twitter_misc":{"Estimated reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/nb-consulting.pro\/playback\/","url":"https:\/\/nb-consulting.pro\/playback\/","name":"Playback - NB Consulting","isPartOf":{"@id":"https:\/\/nb-consulting.pro\/#website"},"datePublished":"2025-11-22T11:34:12+00:00","dateModified":"2025-11-22T11:35:46+00:00","description":"La funcionaldiad playback permite visualizar transito aereo historico con las mismas funcionalidades que si lo estuviesemos viendo en tiempo real.","breadcrumb":{"@id":"https:\/\/nb-consulting.pro\/playback\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/nb-consulting.pro\/playback\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/nb-consulting.pro\/playback\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/nb-consulting.pro\/"},{"@type":"ListItem","position":2,"name":"Playback"}]},{"@type":"WebSite","@id":"https:\/\/nb-consulting.pro\/#website","url":"https:\/\/nb-consulting.pro\/","name":"NB Consulting","description":"Consultor&iacute;a especializada en navegaci&oacute;n a&eacute;rea y formaci&oacute;n profesional en gesti&oacute;n del tr&aacute;fico a&eacute;reo (ATM). Ofrecemos soluciones personalizadas para mejorar la eficiencia, seguridad y sostenibilidad en ANSPs, aeropuertos y aerol&iacute;neas.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/nb-consulting.pro\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"}]}},"_links":{"self":[{"href":"https:\/\/nb-consulting.pro\/en\/wp-json\/wp\/v2\/pages\/903","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nb-consulting.pro\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nb-consulting.pro\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nb-consulting.pro\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nb-consulting.pro\/en\/wp-json\/wp\/v2\/comments?post=903"}],"version-history":[{"count":2,"href":"https:\/\/nb-consulting.pro\/en\/wp-json\/wp\/v2\/pages\/903\/revisions"}],"predecessor-version":[{"id":908,"href":"https:\/\/nb-consulting.pro\/en\/wp-json\/wp\/v2\/pages\/903\/revisions\/908"}],"wp:attachment":[{"href":"https:\/\/nb-consulting.pro\/en\/wp-json\/wp\/v2\/media?parent=903"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}