{"id":31,"date":"2025-08-15T20:49:24","date_gmt":"2025-08-15T18:49:24","guid":{"rendered":"https:\/\/dev.motorlan.test\/?page_id=31"},"modified":"2025-12-01T15:32:52","modified_gmt":"2025-12-01T14:32:52","slug":"marketplace-motorlan","status":"publish","type":"page","link":"https:\/\/www.motorlan.es\/en\/marketplace-motorlan\/","title":{"rendered":"Marketplace Motorlan"},"content":{"rendered":"    <style>\n        \/* Wrapper que contiene skeleton y app *\/\n        .motorlan-app-wrapper {\n            min-height: 800px;\n            display: flex;\n            flex-direction: column;\n            position: relative;\n            background: #fbfbfc;\n        }\n\n        \/* Skeleton como overlay absoluto sobre la app *\/\n        .motorlan-skeleton-overlay {\n            position: absolute;\n            inset: 0;\n            z-index: 9999;\n            transition: opacity 0.3s ease-out;\n        }\n        .motorlan-skeleton-overlay.is-hidden {\n            opacity: 0;\n            pointer-events: none;\n        }\n\n        \/* La app de Vue ocupa todo el espacio *\/\n        .motorlan-app-root {\n            width: 100%;\n            min-height: 100vh;\n        }\n\n        .motorlan-skeleton { width: 100%; height: 100%; background: #fbfbfc; font-family: sans-serif; min-height: 100vh; }\n        .sk-pulse { animation: sk-loading 1.2s infinite alternate; border-radius: 6px; }\n        @keyframes sk-loading { 0% { background-color: #f0f2f5; } 100% { background-color: #e4e6e9; } }\n        \n        \/* Discrete Spinner *\/\n        .sk-spinner-small {\n            width: 20px;\n            height: 20px;\n            border: 2px solid #eee;\n            border-top: 2px solid #9155fd;\n            border-radius: 50%;\n            animation: sk-spin 0.8s linear infinite;\n        }\n        @keyframes sk-spin { to { transform: rotate(360deg); } }\n\n        \/* Shared Components *\/\n        .sk-grid { display: grid; gap: 2rem; padding: 2rem; }\n        .sk-card-item { background: white; border-radius: 12px; border: 1px solid #eee; }\n\n        \/* Login Skeleton *\/\n        .sk-login-container {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            min-height: 100vh;\n            background: #28243d; \n        }\n        .sk-login-card {\n            width: 400px;\n            padding: 2.5rem;\n            background: white;\n            border-radius: 12px;\n            display: flex;\n            flex-direction: column;\n            gap: 1.5rem;\n            box-shadow: 0 10px 25px rgba(0,0,0,0.1);\n        }\n        .sk-login-logo { height: 48px; width: 140px; background: #f0f2f5; margin: 0 auto; border-radius: 8px; display: flex; align-items: center; justify-content: center; }\n        .sk-input { height: 52px; background: #f0f2f5; border-radius: 8px; }\n        .sk-btn { height: 52px; background: #9155fd; border-radius: 8px; opacity: 0.6; }\n\n        \/* Dashboard\/Store Skeleton *\/\n        .sk-dashboard-layout { display: flex; min-height: 100vh; }\n        .sk-sidebar {\n            width: 260px;\n            background: white;\n            border-right: 1px solid #eee;\n            display: flex;\n            flex-direction: column;\n            padding: 1.5rem;\n            gap: 1.2rem;\n            flex-shrink: 0;\n        }\n        @media (max-width: 1280px) { .sk-sidebar { display: none; } }\n        \n        .sk-main { flex: 1; display: flex; flex-direction: column; }\n        .sk-topbar {\n            height: 64px;\n            background: rgba(255,255,255,0.8);\n            backdrop-filter: blur(8px);\n            border-bottom: 1px solid #eee;\n            margin-bottom: 2rem;\n            display: flex;\n            align-items: center;\n            padding: 0 2rem;\n            justify-content: flex-end;\n        }\n        .sk-content { padding: 2rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; }\n        .sk-nav-db-item { height: 44px; background: #f8f9fa; border-radius: 8px; }\n    <\/style>\n\n    <div class=\"motorlan-app-wrapper\">\n        <!-- Skeleton Overlay (fuera de Vue, no ser\u00e1 reemplazado) -->\n        <div id=\"motorlan-skeleton-overlay\" class=\"motorlan-skeleton-overlay\">\n                    <!-- Dashboard\/Store Skeleton -->\n            <div class=\"motorlan-skeleton sk-dashboard-layout\">\n                <!-- Sidebar -->\n                <div class=\"sk-sidebar\">\n                    <div class=\"sk-pulse\" style=\"height: 48px; width: 140px; background: #f0f2f5; margin-bottom: 2rem; border-radius: 8px;\"><\/div>\n                    <div class=\"sk-pulse sk-nav-db-item\"><\/div>\n                    <div class=\"sk-pulse sk-nav-db-item\"><\/div>\n                    <div class=\"sk-pulse sk-nav-db-item\"><\/div>\n                    <div class=\"sk-pulse sk-nav-db-item\"><\/div>\n                    <div class=\"sk-pulse sk-nav-db-item\" style=\"margin-top: auto;\"><\/div>\n                <\/div>\n                \n                <!-- Main Content -->\n                <div class=\"sk-main\">\n                    <div class=\"sk-topbar\">\n                        <div class=\"sk-spinner-small\"><\/div>\n                    <\/div>\n                    <div class=\"sk-content\">\n                        <!-- Simulated Cards -->\n                        <div class=\"sk-pulse sk-card-item\" style=\"aspect-ratio: 0.8;\"><\/div>\n                        <div class=\"sk-pulse sk-card-item\" style=\"aspect-ratio: 0.8;\"><\/div>\n                        <div class=\"sk-pulse sk-card-item\" style=\"aspect-ratio: 0.8;\"><\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n                <\/div>\n        <!-- Vue App Container (separado del skeleton). En las fichas lleva el contenido\n             de la publicaci\u00f3n en HTML para buscadores y sin JS; Vue lo sustituye al montar. -->\n        <div id=\"motorlan-app\" class=\"motorlan-app-root\"><\/div>\n    <\/div>\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":{"_acf_changed":false,"footnotes":""},"class_list":["post-31","page","type-page","status-publish"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.motorlan.es\/en\/wp-json\/wp\/v2\/pages\/31","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.motorlan.es\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.motorlan.es\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.motorlan.es\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.motorlan.es\/en\/wp-json\/wp\/v2\/comments?post=31"}],"version-history":[{"count":0,"href":"https:\/\/www.motorlan.es\/en\/wp-json\/wp\/v2\/pages\/31\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.motorlan.es\/en\/wp-json\/wp\/v2\/media?parent=31"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}