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