{"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\">\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n    <link\n        href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap\"\n        rel=\"stylesheet\">\n\n    <style>\n        \/* --- VARIABLES & RESET --- *\/\n        :root {\n            --font-ui: 'Inter', sans-serif;\n            --font-mono: 'JetBrains Mono', 'Consolas', monospace;\n            --color-bg-dark: #0f172a;\n            --color-bg-glass: rgba(15, 23, 42, 0.65);\n            --color-text-primary: #f8fafc;\n            --color-text-secondary: #94a3b8;\n            --color-accent: #22c55e;\n            --color-accent-blue: #3b82f6;\n            --color-accent-purple: #a855f7;\n            --color-accent-orange: #f97316;\n            --color-border: rgba(148, 163, 184, 0.1);\n        }\n\n        \/* --- ESTILOS GLOBALES PARA LA P\u00c1GINA --- *\/\n        body {\n            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;\n            color: #f8fafc !important;\n            min-height: 100vh;\n        }\n\n        \/* T\u00edtulo de la p\u00e1gina *\/\n        .entry-title,\n        h1.entry-title,\n        .page-title,\n        h1 {\n            color: #f8fafc !important;\n            text-align: center;\n            font-family: 'Inter', sans-serif !important;\n            font-weight: 600;\n            margin-bottom: 20px;\n            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n        }\n\n        \/* Contenedor principal de WordPress *\/\n        .entry-content,\n        .site-content,\n        article,\n        main {\n            background: transparent !important;\n        }\n\n        \/* Ocultar elementos innecesarios del tema *\/\n        .entry-meta,\n        .entry-footer,\n        .post-navigation {\n            display: none !important;\n        }\n\n        \/* --- AIRCRAFT LABELS --- *\/\n        .aircraft-label {\n            font-family: var(--font-mono) !important;\n            font-size: 11px;\n            line-height: 1.3;\n            color: #ffffff !important;\n            background: rgba(15, 23, 42, 0.3);\n            backdrop-filter: blur(1px);\n            padding: 4px 8px;\n            border-radius: 4px;\n            border: 1px solid transparent;\n            border-left: 2px solid transparent;\n            transition: all 0.2s ease-out;\n            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);\n            user-select: none;\n            cursor: grab;\n        }\n\n        .aircraft-label b {\n            color: #ffffff !important;\n            font-weight: 700;\n            font-size: 12px;\n            display: block;\n            margin-bottom: 2px;\n        }\n\n        .aircraft-label .flight-data div {\n            color: #e2e8f0 !important;\n        }\n\n        .aircraft-label:hover {\n            background: rgba(15, 23, 42, 0.85) !important;\n            backdrop-filter: blur(8px);\n            border: 1px solid rgba(34, 197, 94, 0.5);\n            border-left: 3px solid #22c55e;\n            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), 0 0 10px rgba(34, 197, 94, 0.2);\n            transform: scale(1.05);\n            z-index: 10000;\n            cursor: grabbing;\n        }\n\n        \/* --- CONTROLES MODERNOS --- *\/\n        #playback-container {\n            font-family: var(--font-ui);\n            color: var(--color-text-primary);\n        }\n\n        #playback-controls {\n            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);\n            padding: 20px;\n            border-radius: 12px;\n            border: 1px solid #334155;\n            margin-bottom: 15px;\n            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);\n            position: relative;\n        }\n\n        .control-row {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n            margin-bottom: 12px;\n            flex-wrap: wrap;\n        }\n\n        .control-group {\n            display: flex;\n            align-items: center;\n            gap: 4px !important;\n            background: rgba(30, 41, 59, 0.5);\n            padding: 2px 6px !important;\n            border-radius: 4px;\n            border: 1px solid rgba(71, 85, 105, 0.3);\n            height: 26px !important;\n            \/* Altura fija para alinear todo *\/\n        }\n\n        label {\n            font-size: 12px;\n            color: #f8fafc !important;\n            font-weight: 500;\n            white-space: nowrap;\n        }\n\n        select,\n        input[type=\"datetime-local\"],\n        input[type=\"number\"] {\n            background: #1e293b;\n            color: #fff;\n            border: 1px solid #475569;\n            padding: 6px 10px;\n            border-radius: 6px;\n            font-family: var(--font-mono);\n            font-size: 12px;\n            transition: all 0.2s;\n        }\n\n        select:focus,\n        input:focus {\n            outline: none;\n            border-color: var(--color-accent);\n            box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.1);\n        }\n\n        input[type=\"number\"] {\n            width: 70px;\n        }\n\n        \/* --- BOTONES MEJORADOS --- *\/\n        button {\n            background: linear-gradient(135deg, #334155 0%, #475569 100%);\n            color: #fff;\n            border: none;\n            padding: 8px 16px;\n            border-radius: 6px;\n            cursor: pointer;\n            font-family: var(--font-ui);\n            font-weight: 500;\n            font-size: 12px;\n            transition: all 0.2s;\n            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n            position: relative;\n            overflow: hidden;\n        }\n\n        button::before {\n            content: '';\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            width: 0;\n            height: 0;\n            border-radius: 50%;\n            background: rgba(255, 255, 255, 0.1);\n            transform: translate(-50%, -50%);\n            transition: width 0.3s, height 0.3s;\n        }\n\n        button:hover::before {\n            width: 300px;\n            height: 300px;\n        }\n\n        button:hover {\n            transform: translateY(-1px);\n            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);\n        }\n\n        button:active {\n            transform: translateY(0);\n        }\n\n        button:disabled {\n            opacity: 0.4;\n            cursor: not-allowed;\n            transform: none;\n        }\n\n        button:disabled:hover {\n            transform: none;\n            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n        }\n\n        .tool-btn {\n            min-width: 100px;\n            font-weight: 600;\n        }\n\n        #btn-rbl.active {\n            background: linear-gradient(135deg, var(--color-accent-blue) 0%, #2563eb 100%);\n            box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);\n        }\n\n        #btn-cpa.active {\n            background: linear-gradient(135deg, var(--color-accent-purple) 0%, #9333ea 100%);\n            box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);\n        }\n\n        #load-playback-data {\n            background: linear-gradient(135deg, var(--color-accent) 0%, #16a34a 100%);\n            font-weight: 600;\n            padding: 10px 20px;\n        }\n\n        #play-pause-button {\n            background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);\n            font-weight: 600;\n            min-width: 80px;\n        }\n\n        #playback-apply-filter {\n            background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%);\n        }\n\n        #playback-apply-filter.active {\n            background: linear-gradient(135deg, #be123c 0%, #e11d48 100%);\n        }\n\n        .status-bar {\n            display: flex;\n            align-items: center;\n            gap: 15px;\n            padding: 10px 15px;\n            background: rgba(30, 41, 59, 0.3);\n            border-radius: 6px;\n            border: 1px solid rgba(71, 85, 105, 0.2);\n            margin-top: 12px;\n        }\n\n        #playback-status {\n            color: var(--color-text-secondary);\n            font-size: 12px;\n        }\n\n        #simulation-time {\n            color: var(--color-accent);\n            font-family: var(--font-mono);\n            font-size: 13px;\n            font-weight: 600;\n        }\n\n        #playback-map-div {\n            height: 700px;\n            width: 100%;\n            border: 1px solid #334155;\n            background: #000;\n            border-radius: 8px;\n            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);\n        }\n\n        #progress-bar-container {\n            display: none;\n            position: absolute;\n            bottom: 0;\n            left: 0;\n            width: 100%;\n            height: 4px;\n            background-color: #334155;\n            overflow: hidden;\n            border-radius: 0 0 12px 12px;\n        }\n\n        #progress-bar {\n            width: 0%;\n            height: 100%;\n            background: linear-gradient(90deg, var(--color-accent) 0%, #16a34a 100%);\n            transition: width 0.5s ease-in-out;\n            box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);\n        }\n\n        \/* --- FIX PARA CONTROL DE CAPAS DE LEAFLET --- *\/\n        .leaflet-control-layers {\n            background: rgba(15, 23, 42, 0.95) !important;\n            color: #f8fafc !important;\n            border: 1px solid #475569 !important;\n            \/* NEW \u2013 make it sit above the floating buttons *\/\n            z-index: 2000;\n            \/* <-- add this line *\/\n        }\n\n        .leaflet-control-layers-toggle {\n            background-color: rgba(15, 23, 42, 0.95) !important;\n        }\n\n        .leaflet-control-layers-list {\n            color: #f8fafc !important;\n        }\n\n        .leaflet-control-layers label {\n            color: #f8fafc !important;\n        }\n\n        .leaflet-control-layers-separator {\n            border-top: 1px solid #475569 !important;\n        }\n\n\n        .floating-tools {\n            position: absolute;\n            top: 180px;\n            right: 10px;\n            z-index: 1500;\n            display: flex;\n            flex-direction: column;\n            gap: 8px;\n        }\n\n        .floating-btn {\n            background: rgba(15, 23, 42, 0.9) !important;\n            backdrop-filter: blur(10px);\n            color: #f8fafc !important;\n            border: 1px solid rgba(148, 163, 184, 0.2) !important;\n            padding: 10px 16px !important;\n            border-radius: 8px !important;\n            cursor: pointer;\n            font-family: var(--font-ui) !important;\n            font-weight: 600 !important;\n            font-size: 13px !important;\n            transition: all 0.2s ease !important;\n            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;\n            min-width: 90px !important;\n            text-align: left;\n        }\n\n        .floating-btn:hover {\n            background: rgba(30, 41, 59, 0.95) !important;\n            border-color: var(--color-accent) !important;\n            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(34, 197, 94, 0.2) !important;\n            transform: translateX(-2px) !important;\n        }\n\n        .floating-btn.active {\n            background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(22, 163, 74, 0.3) 100%) !important;\n            border-color: var(--color-accent) !important;\n            box-shadow: 0 0 20px rgba(34, 197, 94, 0.4) !important;\n        }\n\n        #btn-rbl.active {\n            background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(37, 99, 235, 0.4) 100%) !important;\n            border-color: var(--color-accent-blue) !important;\n            box-shadow: 0 0 20px rgba(59, 130, 246, 0.5) !important;\n        }\n\n        #btn-cpa.active {\n            background: linear-gradient(135deg, rgba(168, 85, 247, 0.3) 0%, rgba(147, 51, 234, 0.4) 100%) !important;\n            border-color: var(--color-accent-purple) !important;\n            box-shadow: 0 0 20px rgba(168, 85, 247, 0.5) !important;\n        }\n\n        \/* ========================================== *\/\n        \/* TUTORIAL OVERLAY *\/\n        \/* ========================================== *\/\n\n        .tutorial-overlay {\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: rgba(0, 0, 0, 0.75);\n            z-index: 9998;\n            display: none;\n        }\n\n        .tutorial-overlay.active {\n            display: block;\n        }\n\n        .tutorial-spotlight {\n            position: absolute;\n            border: 8px solid #22c55e;\n            border-radius: 12px;\n            box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.75);\n            \/* Este es el \u00fanico que oscurece *\/\n            pointer-events: none;\n            transition: all 0.4s ease;\n            z-index: 9999;\n            background: radial-gradient(circle at center,\n                    rgba(255, 255, 255, 0.25) 0%,\n                    rgba(255, 255, 255, 0.15) 50%,\n                    rgba(255, 255, 255, 0.05) 100%);\n            outline: 3px solid rgba(34, 197, 94, 0.6);\n            outline-offset: 4px;\n        }\n\n        \/* Asegurar alto contraste en elementos destacados *\/\n        .tutorial-highlight-element {\n            position: relative !important;\n        }\n\n        .tutorial-highlight-element button {\n            background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%) !important;\n            color: #ffffff !important;\n            border: 3px solid #22c55e !important;\n            font-weight: 700 !important;\n            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;\n            box-shadow: 0 0 20px rgba(34, 197, 94, 0.6) !important;\n        }\n\n        .tutorial-highlight-element input,\n        .tutorial-highlight-element select {\n            background: #ffffff !important;\n            color: #0f172a !important;\n            border: 3px solid #22c55e !important;\n            font-weight: 600 !important;\n        }\n\n        .tutorial-highlight-element label {\n            color: #ffffff !important;\n            font-weight: 700 !important;\n            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(34, 197, 94, 0.8) !important;\n            background: rgba(0, 0, 0, 0.3) !important;\n            padding: 4px 8px !important;\n            border-radius: 4px !important;\n        }\n\n        .tutorial-highlight-element .control-group {\n            background: rgba(15, 23, 42, 0.95) !important;\n            border: 3px solid #22c55e !important;\n            box-shadow: 0 0 30px rgba(34, 197, 94, 0.5) !important;\n        }\n\n        .tutorial-tooltip {\n            position: fixed;\n            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);\n            color: #f8fafc;\n            padding: 24px;\n            border-radius: 12px;\n            border: 2px solid var(--color-accent);\n            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(34, 197, 94, 0.3);\n            max-width: 400px;\n            z-index: 10001;\n            font-family: var(--font-ui);\n        }\n\n        .tutorial-tooltip h3 {\n            margin: 0 0 12px 0;\n            color: var(--color-accent);\n            font-size: 18px;\n            font-weight: 600;\n        }\n\n        .tutorial-tooltip p {\n            margin: 0 0 20px 0;\n            line-height: 1.6;\n            font-size: 14px;\n            color: #e2e8f0;\n        }\n\n        .tutorial-tooltip .tutorial-step-counter {\n            font-size: 12px;\n            color: var(--color-text-secondary);\n            margin-bottom: 8px;\n            font-weight: 500;\n        }\n\n        .tutorial-buttons {\n            display: flex;\n            gap: 10px;\n            justify-content: flex-end;\n        }\n\n        .tutorial-btn {\n            padding: 10px 20px;\n            border: none;\n            border-radius: 6px;\n            cursor: pointer;\n            font-family: var(--font-ui);\n            font-weight: 600;\n            font-size: 13px;\n            transition: all 0.2s;\n        }\n\n        .tutorial-btn-skip {\n            background: rgba(148, 163, 184, 0.2);\n            color: #94a3b8;\n        }\n\n        .tutorial-btn-skip:hover {\n            background: rgba(148, 163, 184, 0.3);\n            color: #f8fafc;\n        }\n\n        .tutorial-btn-next {\n            background: linear-gradient(135deg, var(--color-accent) 0%, #16a34a 100%);\n            color: #fff;\n        }\n\n        .tutorial-btn-next:hover {\n            transform: translateY(-2px);\n            box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);\n        }\n\n        \/* Responsive para m\u00f3viles *\/\n        @media (max-width: 768px) {\n            .tutorial-tooltip {\n                max-width: 90%;\n                padding: 20px;\n                left: 5% !important;\n                right: 5% !important;\n                top: auto !important;\n                bottom: 20px !important;\n                max-height: 50vh;\n                overflow-y: auto;\n            }\n\n            .tutorial-overlay {\n                overflow-y: auto;\n            }\n        }\n\n\n        \/* ========================================== *\/\n        \/* RESPONSIVE DESIGN PARA M\u00d3VILES *\/\n        \/* ========================================== *\/\n\n        \/* Tablets y m\u00f3viles en landscape *\/\n        @media (max-width: 1024px) {\n            #playback-controls {\n                padding: 16px;\n            }\n\n            .control-row {\n                gap: 10px;\n            }\n\n            button {\n                font-size: 13px;\n                padding: 10px 14px;\n            }\n        }\n\n        \/* M\u00f3viles en portrait *\/\n        @media (max-width: 768px) {\n            #playback-container {\n                padding: 0;\n            }\n\n            #playback-controls {\n                padding: 12px;\n                border-radius: 8px;\n                margin-bottom: 10px;\n            }\n\n            .control-row {\n                flex-direction: column;\n                gap: 8px;\n                margin-bottom: 10px;\n            }\n\n            .control-group {\n                width: 100%;\n                padding: 8px 12px;\n            }\n\n            label {\n                font-size: 13px !important;\n            }\n\n            select,\n            input[type=\"datetime-local\"],\n            input[type=\"number\"] {\n                width: 100%;\n                font-size: 14px;\n                padding: 10px;\n            }\n\n            button {\n                width: 100%;\n                padding: 14px 16px;\n                font-size: 14px;\n                min-width: unset;\n            }\n\n            .tool-btn {\n                min-width: unset;\n            }\n\n            #playback-map-div {\n                height: 60vh;\n                border-radius: 6px;\n            }\n\n            .status-bar {\n                flex-direction: column;\n                align-items: flex-start;\n                gap: 8px;\n            }\n\n            #simulation-time {\n                margin-left: 0 !important;\n                font-size: 14px;\n            }\n\n            #playback-status {\n                font-size: 13px;\n            }\n\n            .aircraft-label {\n                font-size: 12px;\n                padding: 6px 10px;\n            }\n\n            .aircraft-label b {\n                font-size: 13px;\n            }\n        }\n\n        \/* M\u00f3viles peque\u00f1os *\/\n        @media (max-width: 480px) {\n            #playback-controls {\n                padding: 10px;\n            }\n\n            .control-group {\n                padding: 6px 10px;\n            }\n\n            label {\n                font-size: 12px !important;\n            }\n\n            select,\n            input[type=\"datetime-local\"],\n            input[type=\"number\"] {\n                font-size: 13px;\n                padding: 8px;\n            }\n\n            button {\n                padding: 12px 14px;\n                font-size: 13px;\n            }\n\n            #playback-map-div {\n                height: 55vh;\n            }\n\n            .aircraft-label {\n                font-size: 10px;\n                padding: 4px 8px;\n            }\n\n            .aircraft-label b {\n                font-size: 11px;\n            }\n\n            .tool-btn {\n                font-size: 12px;\n            }\n        }\n\n        \/* Ajustes para landscape en m\u00f3viles *\/\n        @media (max-height: 500px) and (orientation: landscape) {\n            #playback-map-div {\n                height: 70vh;\n            }\n\n            #playback-controls {\n                padding: 8px;\n            }\n\n            .control-row {\n                margin-bottom: 6px;\n            }\n        }\n    <\/style>\n\n    <div id=\"playback-container\">\n        <div id=\"playback-controls\">\n            <!-- Fila 1: Carga de datos -->\n            <div class=\"control-row\">\n                <div class=\"control-group\">\n                    <label for=\"start-datetime\">Start (UTC):<\/label>\n                    <input type=\"datetime-local\" id=\"start-datetime\">\n                <\/div>\n\n                <div class=\"control-group\">\n                    <label for=\"duration-minutes\">Duration:<\/label>\n                    <select id=\"duration-minutes\">\n                        <option value=\"15\">15 min<\/option>\n                        <option value=\"30\" selected>30 min<\/option>\n                        <option value=\"60\">1 hora<\/option>\n                        <option value=\"120\">2 horas<\/option>\n                    <\/select>\n                <\/div>\n\n                <button id=\"load-playback-data\">\ud83d\udce5 Load Flights<\/button>\n            <\/div>\n\n            <!-- Fila 2: Filtros de altitud -->\n            <div class=\"control-row\">\n                <div class=\"control-group\">\n                    <label><\/label>\n\n                    <input type=\"number\" id=\"playback-fl-min\" value=\"0\" min=\"0\" max=\"999\" step=\"10\">\n\n                    <label>FL Max:<\/label>\n                    <input type=\"number\" id=\"playback-fl-max\" value=\"999\" min=\"0\" max=\"999\" step=\"10\">\n\n                    <button id=\"playback-apply-filter\">\ud83d\udd0d Filter<\/button>\n\n                <\/div>\n            <\/div>\n\n            <hr style=\"border: none; border-top: 1px solid #334155; margin: 15px 0;\">\n\n            <!-- Fila 3: Controles de reproducci\u00f3n -->\n            <div class=\"control-row\">\n                <button id=\"play-pause-button\" disabled>\u25b6 Play<\/button>\n\n                <div class=\"control-group\">\n                    <label for=\"playback-speed\">Speed:<\/label>\n                    <select id=\"playback-speed\" disabled>\n                        <option value=\"1\">x1<\/option>\n                        <option value=\"2\">x2<\/option>\n                        <option value=\"4\">x4<\/option>\n                        <option value=\"8\">x8<\/option>\n                        <option value=\"16\">x16<\/option>\n                        <option value=\"32\">x32<\/option>\n                    <\/select>\n                <\/div>\n\n                <div class=\"control-group\">\n                    <label for=\"vector-duration\">Vector:<\/label>\n                    <select id=\"vector-duration\">\n                        <option value=\"0\">Off<\/option>\n                        <option value=\"1\">1 min<\/option>\n                        <option value=\"2\" selected>2 min<\/option>\n                        <option value=\"3\">3 min<\/option>\n                        <option value=\"5\">5 min<\/option>\n                    <\/select>\n                <\/div>\n            <\/div>\n\n            <!-- Fila 4: Herramientas -->\n\n\n            <!-- Barra de estado -->\n            <div class=\"status-bar\">\n                <span id=\"playback-status\">Status: Waiting...<\/span>\n                <b id=\"simulation-time\" style=\"margin-left: auto;\">UTC: --:--:--<\/b>\n            <\/div>\n\n            <div id=\"progress-bar-container\">\n                <div id=\"progress-bar\"><\/div>\n            <\/div>\n        <\/div>\n\n        <div id=\"playback-map-div\" style=\"position: relative;\">\n            <!-- Botones flotantes sobre el mapa -->\n            <div class=\"floating-tools\">\n                <button id=\"btn-rbl\" class=\"floating-btn\" title=\"Range & Bearing Line\">\ud83d\udccf RBL<\/button>\n                <button id=\"btn-cpa\" class=\"floating-btn\" title=\"Closest Point of Approach\">\u2716\ufe0f CPA<\/button>\n            <\/div>\n            <!-- Tutorial Overlay -->\n            <div class=\"tutorial-overlay\" id=\"tutorial-overlay\">\n                <div class=\"tutorial-spotlight\" id=\"tutorial-spotlight\"><\/div>\n            <\/div>\n            <div class=\"tutorial-tooltip\" id=\"tutorial-tooltip\" style=\"display: none;\">\n                <div class=\"tutorial-step-counter\" id=\"tutorial-counter\"><\/div>\n                <h3 id=\"tutorial-title\"><\/h3>\n                <p id=\"tutorial-description\"><\/p>\n                <div class=\"tutorial-buttons\">\n                    <button class=\"tutorial-btn tutorial-btn-skip\" id=\"tutorial-skip\">Saltar tutorial<\/button>\n                    <button class=\"tutorial-btn tutorial-btn-next\" id=\"tutorial-next\">Siguiente<\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div> <!-- <<<< ESTE DIV CIERRA EL CONTENEDOR PRINCIPAL -->\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 v28.4 - 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\u00eda especializada en navegaci\u00f3n a\u00e9rea y formaci\u00f3n profesional en gesti\u00f3n del tr\u00e1fico a\u00e9reo (ATM). Ofrecemos soluciones personalizadas para mejorar la eficiencia, seguridad y sostenibilidad en ANSPs, aeropuertos y aerol\u00edneas.\",\"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\u00eda especializada en navegaci\u00f3n a\u00e9rea y formaci\u00f3n profesional en gesti\u00f3n del tr\u00e1fico a\u00e9reo (ATM). Ofrecemos soluciones personalizadas para mejorar la eficiencia, seguridad y sostenibilidad en ANSPs, aeropuertos y aerol\u00edneas.","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}]}}