Free Game Library Organizer & ROM Metadata Scraper | NES, SNES, Genesis, N64 ROMs & More| rec0m88.com<\/title>\n <meta name=\"description\" content=\"Free browser-based ROM metadata scraper and game library organizer. Automatically identify and organize your NES, SNES, N64, Genesis, PlayStation, Game Boy, and retro game collections with box art, release dates, and descriptions. 100% local processing - nothing uploaded.\">\n <meta name=\"keywords\" content=\"ROM organizer, ROM metadata scraper, retro game library, NES ROM organizer, SNES ROM manager, N64 game database, Genesis ROM identifier, PlayStation ROM scraper, Game Boy ROM organizer, retro gaming tools, emulation library manager, game collection organizer, ROM box art downloader, retro game metadata, MAME ROM organizer, Sega ROM scraper, Nintendo ROM database, game library manager, ROM identification tool, retro game catalog\">\n <meta name=\"author\" content=\"rec0m88.com\">\n <meta name=\"robots\" content=\"index, follow\">\n <link rel=\"canonical\" href=\"https:\/\/rec0m88.com\/game-library-organizer\">\n \n \n <meta property=\"og:type\" content=\"website\">\n <meta property=\"og:url\" content=\"https:\/\/rec0m88.com\/game-library-organizer\">\n <meta property=\"og:title\" content=\"Free ROM Metadata Scraper & Game Library Organizer | rec0m88.com\">\n <meta property=\"og:description\" content=\"Organize your retro game collection with automatic metadata, box art, and descriptions. Supports NES, SNES, N64, Genesis, PlayStation, and 30+ platforms.\">\n <meta property=\"og:image\" content=\"https:\/\/rec0m88.com\/images\/game-organizer-preview.jpg\">\n \n \n <meta name=\"twitter:card\" content=\"summary_large_image\">\n <meta name=\"twitter:title\" content=\"Free ROM Metadata Scraper & Game Library Organizer\">\n <meta name=\"twitter:description\" content=\"Organize your retro game collection with automatic metadata, box art, and descriptions. Supports 30+ platforms.\">\n \n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jszip\/3.10.1\/jszip.min.js\"><\/script>\n \n \n <script type=\"application\/ld+json\">\n {\n \"@context\": \"https:\/\/schema.org\",\n \"@type\": \"WebApplication\",\n \"name\": \"Game Library Organizer - ROM Metadata Scraper\",\n \"description\": \"Free browser-based tool to organize retro game ROM collections with automatic metadata scraping.\",\n \"url\": \"https:\/\/rec0m88.com\/game-library-organizer\",\n \"applicationCategory\": \"UtilitiesApplication\",\n \"operatingSystem\": \"Any (Browser-based)\",\n \"offers\": { \"@type\": \"Offer\", \"price\": \"0\", \"priceCurrency\": \"USD\" },\n \"author\": { \"@type\": \"Organization\", \"name\": \"rec0m88.com\", \"url\": \"https:\/\/rec0m88.com\" }\n }\n <\/script>\n<\/head>\n <div class=\"cyber-grid\"><\/div>\n \n <div class=\"tool-container\">\n \n <header class=\"tool-header\">\n <h1>Rec0m88 Organizador de bibliotecas de juegos y extractor de metadatos ROM<h1>\n <p class=\"subtitle\">Identifica tus ROM, obt\u00e9n car\u00e1tulas, descripciones y valoraciones de IGDB y RAWG, y luego descarga todo en forma de archivos organizados listos para Rec0m88 y otras interfaces de emuladores. 100% local y privado.<\/p>\n \n <div class=\"platform-tags\">\n <span class=\"platform-tag\">NES<\/span>\n <span class=\"platform-tag\">SNES<\/span>\n <span class=\"platform-tag\">Nintendo 64<\/span>\n <span class=\"platform-tag\">Game Boy<\/span>\n <span class=\"platform-tag\">GBA<\/span>\n <span class=\"platform-tag\">Nintendo DS<\/span>\n <span class=\"platform-tag\">G\u00e9nesis<\/span>\n <span class=\"platform-tag\">Sistema maestro<\/span>\n <span class=\"platform-tag\">Dreamcast<\/span>\n <span class=\"platform-tag\">PlayStation<\/span>\n <span class=\"platform-tag\">PS2<\/span>\n <span class=\"platform-tag\">PSP<\/span>\n <span class=\"platform-tag\">TurboGrafx-16<\/span>\n <span class=\"platform-tag\">Neo Geo<\/span>\n <span class=\"platform-tag\">Atari<\/span>\n <span class=\"platform-tag\">Sala de juegos<\/span>\n <\/div>\n <\/header>\n\n \n <section class=\"tool-section\" id=\"apiSection\">\n <div class=\"section-header\">\n <div class=\"section-icon\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"url(#iconGradient)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <defs>\n <lineargradient id=\"iconGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n <stop offset=\"0%\" style=\"stop-color:#00f0ff\"\/>\n <stop offset=\"100%\" style=\"stop-color:#bf00ff\"\/>\n <\/lineargradient>\n <\/defs>\n <path d=\"M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4\"\/>\n <\/svg>\n <\/div>\n <div>\n <div class=\"section-title\">Conectar bases de datos de juegos<\/div>\n <div class=\"section-subtitle\">Elija una o ambas API para obtener los mejores resultados de coincidencia.<\/div>\n <\/div>\n <\/div>\n\n <div class=\"api-tabs\">\n <button type=\"button\" class=\"api-tab active\" data-api=\"rawg\" id=\"rawgTab\">\n <span class=\"api-tab-icon rawg\">R<\/span>\n RAWG.io\n <span class=\"status-dot\" id=\"rawgDot\"><\/span>\n <\/button>\n <button type=\"button\" class=\"api-tab\" data-api=\"igdb\" id=\"igdbTab\">\n <span class=\"api-tab-icon igdb\">I<\/span>\n IGDB (Twitch)\n <span class=\"status-dot\" id=\"igdbDot\"><\/span>\n <\/button>\n <\/div>\n\n \n <div class=\"api-panel active\" id=\"rawgPanel\">\n <div class=\"provider-badge\">\n <div class=\"provider-badge-icon rawg\">R<\/div>\n <div class=\"provider-badge-text\">\n <h3>Base de datos de videojuegos RAWG<\/h3>\n <span>M\u00e1s de 500,000 juegos \u2022 20,000 solicitudes gratuitas al mes<\/span>\n <\/div>\n <\/div>\n\n <div class=\"instructions-box\">\n <div class=\"instructions-header\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/>\n <polyline points=\"14 2 14 8 20 8\"\/>\n <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"\/>\n <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"\/>\n <polyline points=\"10 9 9 9 8 9\"\/>\n <\/svg>\n C\u00f3mo obtener su clave API RAWG gratuita\n <\/div>\n <ol>\n <li>Ir a <a href=\"https:\/\/rawg.io\/apidocs\" target=\"_blank\" rel=\"noopener\">rawg.io\/apidocs<\/a><\/li>\n <li>Haga clic en el <strong>\u201cObtener clave API\u201d<\/strong> bot\u00f3n<\/li>\n <li>Crea una cuenta o inicia sesi\u00f3n con Google\/GitHub.<\/li>\n <li>Tu clave API se mostrar\u00e1 en la p\u00e1gina.<\/li>\n <li>Copia la clave y p\u00e9gala a continuaci\u00f3n.<\/li>\n <\/ol>\n <div class=\"tip-box\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n <line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"\/>\n <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"\/>\n <\/svg>\n <span><strong>Consejo profesional:<\/strong> El nivel gratuito te ofrece 20 000 solicitudes al mes, \u00a1suficientes para organizar grandes colecciones!<\/span>\n <\/div>\n <\/div>\n\n <div class=\"input-group\">\n <div class=\"input-wrapper\" style=\"flex: 2;\">\n <label for=\"rawgKeyInput\">Clave API RAWG<\/label>\n <input type=\"text\" id=\"rawgKeyInput\" class=\"input-field\" placeholder=\"Pega aqu\u00ed tu clave API de RAWG...\" autocomplete=\"off\" \/>\n <\/div>\n <div class=\"input-wrapper\" style=\"flex: 0; align-self: flex-end;\">\n <button type=\"button\" class=\"btn btn-rawg\" id=\"rawgValidateBtn\">\n <span id=\"rawgValidateBtnText\">Validar<\/span>\n <\/button>\n <\/div>\n <\/div>\n <div id=\"rawgStatus\" class=\"status-message\"><\/div>\n <\/div>\n\n \n <div class=\"api-panel\" id=\"igdbPanel\">\n <div class=\"provider-badge\">\n <div class=\"provider-badge-icon igdb\">I<\/div>\n <div class=\"provider-badge-text\">\n <h3>IGDB \u2013 Base de datos de juegos en Internet<\/h3>\n <span>Desarrollado por Twitch \u2022 Metadatos detallados \u2022 4 solicitudes por segundo<\/span>\n <\/div>\n <\/div>\n\n <div class=\"instructions-box\">\n <div class=\"instructions-header\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/>\n <polyline points=\"14 2 14 8 20 8\"\/>\n <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"\/>\n <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"\/>\n <polyline points=\"10 9 9 9 8 9\"\/>\n <\/svg>\n C\u00f3mo obtener tus credenciales gratuitas de IGDB\/Twitch\n <\/div>\n <ol>\n <li>Ir a <a href=\"https:\/\/dev.twitch.tv\/console\" target=\"_blank\" rel=\"noopener\">dev.twitch.tv\/console<\/a><\/li>\n <li>Inicia sesi\u00f3n con tu cuenta de Twitch (crea una gratis si es necesario).<\/li>\n <li>Haga clic <strong>\u201cRegistra tu solicitud\u201d<\/strong><\/li>\n <li>Rellene el formulario:\n <ul>\n <li><strong>Nombre:<\/strong> Cualquier nombre (por ejemplo, \u201cMi organizador de juegos\u201d).<\/li>\n <li><strong>URL de redireccionamiento de OAuth:<\/strong> <code>https:\/\/localhost<\/code><\/li>\n <li><strong>Categor\u00eda:<\/strong> Seleccione \u201cIntegraci\u00f3n de aplicaciones\u201d.\u201d<\/li>\n <\/ul>\n <\/li>\n <li>Haga clic <strong>\u201cCrear\u201d<\/strong><\/li>\n <li>Haga clic <strong>\u201cAdministrar\u201d<\/strong> en su nueva solicitud<\/li>\n <li>Copia tu <strong>Identificaci\u00f3n del cliente<\/strong><\/li>\n <li>Haga clic <strong>\u201cNuevo secreto\u201d<\/strong> y copie el secreto generado<\/li>\n <li>Pega ambos valores a continuaci\u00f3n y haz clic en <strong>Validar<\/strong><\/li>\n <\/ol>\n\n <div style=\"margin-top: 20px; padding: 18px 22px; background: var(--bg-primary); border: 1px solid rgba(255, 170, 0, 0.3); border-radius: 12px;\">\n <div style=\"display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--warning); font-weight: 600; font-size: 0.95rem;\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"width: 20px; height: 20px;\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/>\n <\/svg>\n Caducidad y actualizaci\u00f3n de tokens\n <\/div>\n <p style=\"color: var(--text-secondary); font-size: 0.88rem; line-height: 1.7; margin-bottom: 12px;\">\n Tu token de acceso es v\u00e1lido durante aproximadamente <strong style=\"color: var(--text-primary);\">60 d\u00edas<\/strong>. Cuando caduque, aparecer\u00e1n errores de conexi\u00f3n durante el escaneo.\n <\/p>\n <p style=\"color: var(--text-secondary); font-size: 0.88rem; line-height: 1.7; font-weight: 600; margin-bottom: 10px;\">\n Para actualizar su token:\n <\/p>\n <ol style=\"margin-left: 20px; color: var(--text-secondary); font-size: 0.88rem; line-height: 1.8;\">\n <li>Tu <strong style=\"color: var(--text-primary);\">Identificaci\u00f3n del cliente<\/strong> y <strong style=\"color: var(--text-primary);\">Secreto del cliente<\/strong> nunca caducan, no necesitas otros nuevos<\/li>\n <li>Simplemente haga clic en el <strong style=\"color: var(--neon-purple);\">Validar<\/strong> bot\u00f3n de nuevo: genera autom\u00e1ticamente un nuevo token.<\/li>\n <li>\u00a1Eso es todo! El nuevo token se ha guardado y est\u00e1 listo para usar.<\/li>\n <\/ol>\n <div style=\"margin-top: 14px; padding: 12px 16px; background: rgba(255, 170, 0, 0.08); border: 1px solid rgba(255, 170, 0, 0.2); border-radius: 8px; font-size: 0.82rem; color: var(--warning); display: flex; align-items: flex-start; gap: 8px;\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px;\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/>\n <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/>\n <\/svg>\n <span>Si alguna vez haces clic en <strong>\u201cNuevo secreto\u201d<\/strong> En la consola de Twitch, tu antiguo secreto queda invalidado de forma permanente. Tendr\u00e1s que pegar aqu\u00ed el nuevo secreto y volver a validarlo. Hazlo solo si tu secreto se ha visto comprometido.<\/span>\n <\/div>\n <\/div>\n <div class=\"tip-box\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n <line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"\/>\n <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"\/>\n <\/svg>\n <span><strong>Consejo profesional:<\/strong> IGDB cuenta con datos excelentes sobre los juegos m\u00e1s recientes e incluye sinopsis detalladas, capturas de pantalla y videos.<\/span>\n <\/div>\n <\/div>\n\n <div class=\"input-group\">\n <div class=\"input-wrapper\">\n <label for=\"igdbClientId\">ID de cliente de Twitch<\/label>\n <input type=\"text\" id=\"igdbClientId\" class=\"input-field\" placeholder=\"Su n\u00famero de identificaci\u00f3n de cliente...\" autocomplete=\"off\" \/>\n <\/div>\n <div class=\"input-wrapper\">\n <label for=\"igdbClientSecret\">Secreto del cliente de Twitch<\/label>\n <input type=\"password\" id=\"igdbClientSecret\" class=\"input-field\" placeholder=\"Tu secreto de cliente...\" autocomplete=\"off\" \/>\n <\/div>\n <div class=\"input-wrapper\" style=\"flex: 0; align-self: flex-end;\">\n <button type=\"button\" class=\"btn btn-igdb\" id=\"igdbValidateBtn\">\n <span id=\"igdbValidateBtnText\">Validar<\/span>\n <\/button>\n <\/div>\n <\/div>\n <div id=\"igdbStatus\" class=\"status-message\"><\/div>\n <\/div>\n\n \n <div class=\"enabled-apis\" id=\"enabledApis\">\n <span class=\"enabled-apis-label\">API activas:<\/span>\n <div id=\"enabledApisList\"><\/div>\n <\/div>\n\n \n <div class=\"api-mode-selector\" id=\"apiModeSelector\" style=\"display: none; margin-top: 20px; padding: 20px 25px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 14px;\">\n <h4 style=\"color: var(--neon-purple); margin-bottom: 12px; font-size: 0.95rem; display: flex; align-items: center; gap: 8px;\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"width: 18px; height: 18px;\"><circle cx=\"12\" cy=\"12\" r=\"3\"\/><path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z\"\/><\/svg>\n Modo Multi-API\n <\/h4>\n <p style=\"color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 15px;\">Tanto RAWG como IGDB est\u00e1n conectados. Elige c\u00f3mo utilizarlos:<\/p>\n <div style=\"display: flex; flex-direction: column; gap: 10px;\">\n <label style=\"display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 12px 16px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 10px; transition: all 0.3s;\" class=\"api-mode-option\" data-mode=\"merge\">\n <input type=\"radio\" name=\"apiMode\" value=\"merge\" checked style=\"accent-color: var(--neon-purple); margin-top: 3px;\">\n <div>\n <div style=\"color: var(--text-primary); font-weight: 600; font-size: 0.95rem;\">Combinar datos <span style=\"color: var(--success); font-size: 0.8rem; font-weight: 500;\">(Recomendado)<\/span><\/div>\n <div style=\"color: var(--text-secondary); font-size: 0.82rem; margin-top: 3px;\">Consulta ambas API y combina los mejores datos de cada una: la mejor imagen, la descripci\u00f3n m\u00e1s extensa, todos los g\u00e9neros fusionados, la calificaci\u00f3n m\u00e1s alta.<\/div>\n <\/div>\n <\/label>\n <label style=\"display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 12px 16px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 10px; transition: all 0.3s;\" class=\"api-mode-option\" data-mode=\"best\">\n <input type=\"radio\" name=\"apiMode\" value=\"best\" style=\"accent-color: var(--neon-purple); margin-top: 3px;\">\n <div>\n <div style=\"color: var(--text-primary); font-weight: 600; font-size: 0.95rem;\">Mejor coincidencia<\/div>\n <div style=\"color: var(--text-secondary); font-size: 0.82rem; margin-top: 3px;\">Consulta ambas API, pero selecciona el \u00fanico resultado con la puntuaci\u00f3n de confianza de coincidencia m\u00e1s alta.<\/div>\n <\/div>\n <\/label>\n <label style=\"display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 12px 16px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 10px; transition: all 0.3s;\" class=\"api-mode-option\" data-mode=\"rawg\">\n <input type=\"radio\" name=\"apiMode\" value=\"rawg\" style=\"accent-color: var(--neon-purple); margin-top: 3px;\">\n <div>\n <div style=\"color: var(--text-primary); font-weight: 600; font-size: 0.95rem;\">Solo RAWG<\/div>\n <div style=\"color: var(--text-secondary); font-size: 0.82rem; margin-top: 3px;\">Utiliza solo RAWG: excelentes im\u00e1genes de fondo, ideales para t\u00edtulos m\u00e1s recientes.<\/div>\n <\/div>\n <\/label>\n <label style=\"display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 12px 16px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 10px; transition: all 0.3s;\" class=\"api-mode-option\" data-mode=\"igdb\">\n <input type=\"radio\" name=\"apiMode\" value=\"igdb\" style=\"accent-color: var(--neon-purple); margin-top: 3px;\">\n <div>\n <div style=\"color: var(--text-primary); font-weight: 600; font-size: 0.95rem;\">Solo IGDB<\/div>\n <div style=\"color: var(--text-secondary); font-size: 0.82rem; margin-top: 3px;\">Solo usa IGDB: res\u00famenes detallados y argumentos, ideal para t\u00edtulos retro.<\/div>\n <\/div>\n <\/label>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"tool-section\" id=\"uploadSection\">\n <div class=\"upload-area\">\n <div class=\"upload-visual\">\n <svg viewbox=\"0 0 100 100\" fill=\"none\">\n <defs>\n <lineargradient id=\"uploadGrad\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n <stop offset=\"0%\" style=\"stop-color:#00f0ff\"\/>\n <stop offset=\"50%\" style=\"stop-color:#bf00ff\"\/>\n <stop offset=\"100%\" style=\"stop-color:#ff00aa\"\/>\n <\/lineargradient>\n <\/defs>\n <rect x=\"15\" y=\"25\" width=\"70\" height=\"55\" rx=\"8\" stroke=\"url(#uploadGrad)\" stroke-width=\"2\" fill=\"none\"\/>\n <path d=\"M35 45 L50 30 L65 45\" stroke=\"url(#uploadGrad)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"\/>\n <line x1=\"50\" y1=\"30\" x2=\"50\" y2=\"60\" stroke=\"url(#uploadGrad)\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <rect x=\"25\" y=\"15\" width=\"15\" height=\"20\" rx=\"3\" stroke=\"url(#uploadGrad)\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.5\"\/>\n <rect x=\"60\" y=\"15\" width=\"15\" height=\"20\" rx=\"3\" stroke=\"url(#uploadGrad)\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.5\"\/>\n <\/svg>\n <\/div>\n <h2 class=\"upload-title\">Selecciona tu carpeta ROM<\/h2>\n <p class=\"upload-subtitle\">Elige una carpeta o los archivos que contengan las ROM de tus juegos. Todo se procesa de manera local, nada sale de tu computadora.<\/p>\n \n \n \n \n <div class=\"rom-path-section\">\n <div class=\"rom-path-header\">\n <div class=\"rom-path-title\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"width: 20px; height: 20px;\">\n <path d=\"M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z\"\/>\n <line x1=\"12\" y1=\"11\" x2=\"12\" y2=\"17\"\/>\n <line x1=\"9\" y1=\"14\" x2=\"15\" y2=\"14\"\/>\n <\/svg>\n <span>Ruta de la carpeta ROM<\/span>\n <\/div>\n <span class=\"rom-path-hint\">Necesario para la integraci\u00f3n del emulador y las rutas de archivo precisas.<\/span>\n <\/div>\n \n <div class=\"rom-path-description\">\n <p>Ingrese el <strong>ruta completa del sistema<\/strong> a tu carpeta ROM. Esto garantiza que los cat\u00e1logos exportados contengan rutas completas que tu emulador pueda utilizar directamente.<\/p>\n <\/div>\n \n <div class=\"rom-path-input-group\">\n <div class=\"rom-path-input-wrapper\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"rom-path-input-icon\">\n <path d=\"M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z\"\/>\n <\/svg>\n <input type=\"text\" id=\"romBasePath\" \n placeholder=\"Por ejemplo, D:\\Emulaci\u00f3n\\ROMs o \/home\/usuario\/roms.\" \n class=\"rom-path-input\" \n autocomplete=\"off\" \/>\n <\/div>\n <button type=\"button\" class=\"btn btn-save-path\" id=\"saveRomPath\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z\"\/>\n <polyline points=\"17 21 17 13 7 13 7 21\"\/>\n <polyline points=\"7 3 7 8 15 8\"\/>\n <\/svg>\n Guardar ruta\n <\/button>\n <\/div>\n \n <div id=\"romPathStatus\" class=\"rom-path-status\"><\/div>\n \n \n <div id=\"folderStructureInfo\" class=\"folder-structure-info\" style=\"display: none;\"><\/div>\n \n \n <div id=\"pathPreview\" class=\"path-preview\" style=\"display: none;\"><\/div>\n \n <div class=\"rom-path-examples\">\n <div class=\"example-header\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"width: 14px; height: 14px;\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n <line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"\/>\n <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"\/>\n <\/svg>\n Ejemplos de estructuras de carpetas:\n <\/div>\n <div class=\"example-grid\">\n <div class=\"example-item\">\n <code>D:\\Juegos\\<\/code>\n <span class=\"example-subfolders\">nes\\ snes\\ n64\\ gba\\<\/span>\n <\/div>\n <div class=\"example-item\">\n <code>\/casa\/usuario\/roms\/<\/code>\n <span class=\"example-subfolders\">NES\/ SNES\/ PSX\/<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"upload-buttons\">\n <button type=\"button\" class=\"btn btn-primary btn-large\" id=\"browseFolderBtn\" disabled>\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z\"\/>\n <\/svg>\n Buscar carpeta\n <\/button>\n <button type=\"button\" class=\"btn btn-secondary btn-large\" id=\"browseFilesBtn\" disabled>\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z\"\/>\n <polyline points=\"13 2 13 9 20 9\"\/>\n <\/svg>\n Seleccionar una sola ROM\n <\/button>\n <\/div>\n\n <input type=\"file\" id=\"folderInput\" class=\"file-input-hidden\" webkitdirectory directory multiple \/>\n <input type=\"file\" id=\"filesInput\" class=\"file-input-hidden\" multiple accept=\".zip,.7z,.rar,.nes,.sfc,.smc,.gb,.gbc,.gba,.n64,.z64,.v64,.nds,.3ds,.md,.gen,.bin,.sms,.gg,.iso,.cue,.chd,.psx,.pbp,.pce,.a26,.a78,.lnx,.col,.ngp,.ngc,.ws,.wsc,.wad,.wbfs,.fds,.32x,.scd,.gcm,.gcz,.rvz,.wux,.nsp,.xci\" \/>\n\n <div class=\"security-badge\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"\/>\n <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"\/>\n <\/svg>\n <div>\n <strong>Procesamiento local 100%: tus archivos nunca salen de tu computadora.<\/strong>\n <p style=\"margin: 4px 0 0 0; font-size: 0.85em; opacity: 0.8;\">\n Es posible que su navegador le advierta de que los archivos se \u201ccargar\u00e1n\u201d; se trata de una frase est\u00e1ndar del navegador. Sus archivos se procesan. <em>totalmente en tu navegador<\/em> y son <strong>nunca enviado a ning\u00fan servidor<\/strong>.\n <\/p>\n <\/div>\n<\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"tool-section progress-section\" id=\"progressSection\">\n <div class=\"progress-header\">\n <div class=\"progress-title\">\n <span class=\"spinner\"><\/span>\n Juegos de escanear y emparejar...\n <\/div>\n <span class=\"progress-percent\" id=\"progressPercent\">0%<\/span>\n <\/div>\n <div class=\"progress-bar-container\">\n <div class=\"progress-bar\" id=\"progressBar\"><\/div>\n <\/div>\n <div class=\"current-file\" id=\"currentFile\">Preparando...<\/div>\n <div class=\"progress-stats\">\n <div class=\"stat-card\">\n <div class=\"stat-value\" id=\"statTotal\">0<\/div>\n <div class=\"stat-label\">Archivos encontrados<\/div>\n <\/div>\n <div class=\"stat-card\">\n <div class=\"stat-value\" id=\"statProcessed\">0<\/div>\n <div class=\"stat-label\">Procesado<\/div>\n <\/div>\n <div class=\"stat-card\">\n <div class=\"stat-value\" id=\"statMatched\">0<\/div>\n <div class=\"stat-label\">Emparejado<\/div>\n <\/div>\n <div class=\"stat-card\">\n <div class=\"stat-value\" id=\"statUnmatched\">0<\/div>\n <div class=\"stat-label\">Inigualable<\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n<section class=\"results-section\" id=\"resultsSection\">\n <div class=\"tool-section\" style=\"padding: 25px 35px;\">\n <div class=\"results-header\">\n <h2 class=\"results-title\">Tu biblioteca organizada<\/h2>\n <\/div>\n \n \n <div class=\"export-options-grid\" style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin: 25px 0;\">\n \n \n <div class=\"export-option\" style=\"background: linear-gradient(135deg, rgba(0, 240, 255, 0.1), rgba(191, 0, 255, 0.1)); border: 2px solid var(--neon-blue); border-radius: 12px; padding: 18px; position: relative;\">\n <span style=\"position: absolute; top: -10px; right: 15px; background: var(--neon-blue); color: var(--bg-primary); font-size: 0.7rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; text-transform: uppercase;\">Recomendado<\/span>\n <button type=\"button\" class=\"btn btn-primary\" id=\"exportHtmlBtn\" style=\"width: 100%; margin-bottom: 12px;\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"16 18 22 12 16 6\"\/>\n <polyline points=\"8 6 2 12 8 18\"\/>\n <\/svg>\n Cat\u00e1logo Rec0m88\n <\/button>\n <p style=\"color: var(--text-secondary); font-size: 0.82rem; line-height: 1.5; margin: 0;\">\n <strong style=\"color: var(--neon-blue);\">El administrador de juegos para el emulador Rec0m88.<\/strong> Explora tus juegos con im\u00e1genes de las cajas, descripciones y ejec\u00fatalos directamente.\n <\/p>\n <\/div>\n \n \n <div class=\"export-option\" style=\"background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; padding: 18px;\">\n <button type=\"button\" class=\"btn btn-secondary\" id=\"exportEsBtn\" style=\"width: 100%; margin-bottom: 12px;\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\" ry=\"2\"\/>\n <line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"\/>\n <line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"\/>\n <\/svg>\n Estaci\u00f3n de emulaci\u00f3n\n <\/button>\n <p style=\"color: var(--text-secondary); font-size: 0.82rem; line-height: 1.5; margin: 0;\">\n <strong style=\"color: var(--neon-purple);\">Formato XML para RetroArch, Batocera, RetroPie,<\/strong> y otras interfaces basadas en EmulationStation.\n <\/p>\n <\/div>\n \n \n <div class=\"export-option\" style=\"background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; padding: 18px;\">\n <button type=\"button\" class=\"btn btn-secondary\" id=\"exportLibraryJsonBtn\" style=\"width: 100%; margin-bottom: 12px;\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/>\n <polyline points=\"14 2 14 8 20 8\"\/>\n <\/svg>\n Biblioteca JSON (v2)\n <\/button>\n <p style=\"color: var(--text-secondary); font-size: 0.82rem; line-height: 1.5; margin: 0;\">\n <strong style=\"color: var(--neon-cyan);\">Para el emulador y visor Rec0m88.<\/strong> El archivo de datos que carga library-viewer.html.\n <\/p>\n <\/div>\n\n \n <div class=\"export-option\" style=\"background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; padding: 18px;\">\n <button type=\"button\" class=\"btn btn-secondary\" id=\"exportJsonBtn\" style=\"width: 100%; margin-bottom: 12px;\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/>\n <polyline points=\"14 2 14 8 20 8\"\/>\n <\/svg>\n JSON (heredado)\n <\/button>\n <p style=\"color: var(--text-secondary); font-size: 0.82rem; line-height: 1.5; margin: 0;\">\n <strong style=\"color: var(--neon-purple);\">Datos sin procesar para desarrolladores.<\/strong> Formato plano para herramientas personalizadas o importaci\u00f3n de hojas de c\u00e1lculo.\n <\/p>\n <\/div>\n \n \n <div class=\"export-option\" style=\"background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; padding: 18px;\">\n <button type=\"button\" class=\"btn btn-secondary\" id=\"exportCsvBtn\" style=\"width: 100%; margin-bottom: 12px;\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"\/>\n <line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\"\/>\n <line x1=\"9\" y1=\"3\" x2=\"9\" y2=\"21\"\/>\n <\/svg>\n Hoja de c\u00e1lculo CSV\n <\/button>\n <p style=\"color: var(--text-secondary); font-size: 0.82rem; line-height: 1.5; margin: 0;\">\n <strong style=\"color: var(--neon-purple);\">Se abre en Excel o Google Sheets.<\/strong> Ideal para ver tu colecci\u00f3n como una lista ordenable.\n <\/p>\n <\/div>\n <\/div>\n \n \n <div style=\"display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; padding-top: 15px; border-top: 1px solid var(--border);\">\n <button type=\"button\" class=\"btn btn-primary\" id=\"downloadArtBtn\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/>\n <polyline points=\"7 10 12 15 17 10\"\/>\n <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/>\n <\/svg>\n Descargar arte de la caja\n <\/button>\n <button type=\"button\" class=\"btn btn-secondary\" id=\"resetBtn\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"23 4 23 10 17 10\"\/>\n <path d=\"M20.49 15a9 9 0 1 1-2.12-9.36L23 10\"\/>\n <\/svg>\n Nuevo escaneo\n <\/button>\n <\/div>\n <\/div>\n\n <div class=\"filter-tabs\" id=\"filterTabs\">\n <button type=\"button\" class=\"filter-tab active\" data-filter=\"all\">\n Todos los juegos <span class=\"count\" id=\"countAll\">0<\/span>\n <\/button>\n <button type=\"button\" class=\"filter-tab\" data-filter=\"matched\">\n \u2713 Emparejado <span class=\"count\" id=\"countMatched\">0<\/span>\n <\/button>\n <button type=\"button\" class=\"filter-tab\" data-filter=\"unmatched\">\n \u2717 Inigualable <span class=\"count\" id=\"countUnmatched\">0<\/span>\n <\/button>\n <\/div>\n\n <div class=\"search-box\">\n <div class=\"search-wrapper\">\n <svg class=\"search-icon\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"\/>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/>\n <\/svg>\n <input type=\"text\" id=\"searchInput\" placeholder=\"Busca en tu biblioteca...\" \/>\n <\/div>\n <\/div>\n\n <div class=\"games-grid\" id=\"gamesGrid\"><\/div>\n<\/section>\n\n\n<section class=\"tool-section\" id=\"mergeSection\">\n <div class=\"section-header\">\n <div class=\"section-icon\" style=\"background: linear-gradient(135deg, rgba(191, 0, 255, 0.1), rgba(255, 0, 170, 0.1)); border-color: rgba(191, 0, 255, 0.3);\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"url(#mergeIconGrad)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <defs>\n <lineargradient id=\"mergeIconGrad\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n <stop offset=\"0%\" style=\"stop-color:#bf00ff\"\/>\n <stop offset=\"100%\" style=\"stop-color:#ff00aa\"\/>\n <\/lineargradient>\n <\/defs>\n <path d=\"M8 6h13\"\/><path d=\"M8 12h13\"\/><path d=\"M8 18h13\"\/><path d=\"M3 6h.01\"\/><path d=\"M3 12h.01\"\/><path d=\"M3 18h.01\"\/>\n <\/svg>\n <\/div>\n <div>\n <div class=\"section-title\" style=\"background: linear-gradient(135deg, var(--neon-purple), var(--neon-pink)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;\">Combinar archivos JSON Rec0m88<\/div>\n <div class=\"section-subtitle\">Combina varios archivos de cat\u00e1logo exportados en una colecci\u00f3n unificada.<\/div>\n <\/div>\n <\/div>\n <p style=\"color: var(--text-secondary); margin-bottom: 20px; font-size: 0.95rem; line-height: 1.6;\">\n \u00bfTienes varias exportaciones del cat\u00e1logo Rec0m88 de diferentes sesiones de escaneo? Selecci\u00f3nalas todas y comb\u00ednalas en un \u00fanico archivo organizado con detecci\u00f3n autom\u00e1tica de duplicados.\n <\/p>\n <div style=\"display: flex; gap: 15px; align-items: center; flex-wrap: wrap;\">\n <button type=\"button\" class=\"btn btn-secondary\" id=\"openMergeBtn\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M8 6h13\"\/><path d=\"M8 12h13\"\/><path d=\"M8 18h13\"\/><path d=\"M3 6h.01\"\/><path d=\"M3 12h.01\"\/><path d=\"M3 18h.01\"\/>\n <\/svg>\n Seleccionar y combinar cat\u00e1logos\n <\/button>\n <span style=\"color: var(--text-muted); font-size: 0.85rem;\">No se necesita clave API: funciona con cualquier archivo HTML exportado.<\/span>\n <\/div>\n <input type=\"file\" id=\"mergeFilesInput\" class=\"file-input-hidden\" multiple accept=\".json\" \/>\n<\/section>\n<\/div>\n\n\n<div class=\"toast-container\" id=\"toastContainer\"><\/div>\n\n\n<div class=\"modal-overlay\" id=\"gameModal\">\n <div class=\"modal\">\n <div class=\"modal-header\">\n <h3 id=\"modalTitle\">Detalles del juego<\/h3>\n <button type=\"button\" class=\"modal-close\" id=\"modalCloseBtn\">\u00d7<\/button>\n <\/div>\n <div class=\"modal-body\" id=\"modalBody\"><\/div>\n <\/div>\n<\/div>\n\n\n<div class=\"modal-overlay\" id=\"mergeModal\">\n <div class=\"modal\" style=\"max-width: 750px;\">\n <div class=\"modal-header\">\n <h3 id=\"mergeModalTitle\">Combinar cat\u00e1logos HTML<\/h3>\n <button type=\"button\" class=\"modal-close\" id=\"mergeModalCloseBtn\">\u00d7<\/button>\n <\/div>\n <div class=\"modal-body\" id=\"mergeModalBody\">\n <div style=\"text-align: center; padding: 20px 0 30px;\">\n <div style=\"width: 80px; height: 80px; margin: 0 auto 20px; position: relative;\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"url(#mergeGrad)\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"width: 100%; height: 100%;\">\n <defs>\n <lineargradient id=\"mergeGrad\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n <stop offset=\"0%\" style=\"stop-color:#bf00ff\"\/>\n <stop offset=\"100%\" style=\"stop-color:#ff00aa\"\/>\n <\/lineargradient>\n <\/defs>\n <rect x=\"2\" y=\"3\" width=\"7\" height=\"9\" rx=\"1.5\"\/>\n <rect x=\"15\" y=\"3\" width=\"7\" height=\"9\" rx=\"1.5\"\/>\n <rect x=\"8.5\" y=\"14\" width=\"7\" height=\"9\" rx=\"1.5\"\/>\n <path d=\"M5.5 12 L9.5 14\"\/>\n <path d=\"M18.5 12 L14.5 14\"\/>\n <\/svg>\n <\/div>\n <h3 style=\"font-size: 1.3rem; margin-bottom: 10px; background: linear-gradient(135deg, var(--neon-purple), var(--neon-pink)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;\">Combinar varios cat\u00e1logos<\/h3>\n <p style=\"color: var(--text-secondary); max-width: 450px; margin: 0 auto 25px; font-size: 0.95rem; line-height: 1.6;\">\n Seleccione todos los archivos JSON del cat\u00e1logo exportados. Los duplicados se detectan y eliminan autom\u00e1ticamente.\n <\/p>\n <button type=\"button\" class=\"btn btn-primary\" id=\"selectMergeFilesBtn\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z\"\/>\n <polyline points=\"13 2 13 9 20 9\"\/>\n <\/svg>\n Seleccionar archivos JSON de Recom88\n <\/button>\n <\/div>\n\n <div id=\"mergeFilesList\" style=\"display: none; margin-bottom: 25px;\">\n <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;\">\n <h4 style=\"color: var(--neon-blue); font-size: 1rem;\">Archivos cargados<\/h4>\n <button type=\"button\" class=\"btn btn-secondary\" id=\"addMoreFilesBtn\" style=\"padding: 8px 16px; font-size: 0.85rem;\">\n + A\u00f1adir m\u00e1s archivos\n <\/button>\n <\/div>\n <div id=\"mergeFilesListInner\" style=\"max-height: 200px; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-secondary);\"><\/div>\n <\/div>\n\n <div id=\"mergeStats\" style=\"display: none; margin-bottom: 25px;\">\n <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px;\">\n <div class=\"stat-card\">\n <div class=\"stat-value\" id=\"mergeStatFiles\">0<\/div>\n <div class=\"stat-label\">Archivos<\/div>\n <\/div>\n <div class=\"stat-card\">\n <div class=\"stat-value\" id=\"mergeStatTotal\">0<\/div>\n <div class=\"stat-label\">Total de juegos<\/div>\n <\/div>\n <div class=\"stat-card\">\n <div class=\"stat-value\" id=\"mergeStatUnique\">0<\/div>\n <div class=\"stat-label\">\u00danico<\/div>\n <\/div>\n <div class=\"stat-card\">\n <div class=\"stat-value\" id=\"mergeStatDupes\">0<\/div>\n <div class=\"stat-label\">Duplicados<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div id=\"mergeDupeOptions\" style=\"display: none; margin-bottom: 25px; padding: 20px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px;\">\n <h4 style=\"color: var(--neon-pink); margin-bottom: 12px; font-size: 0.95rem;\">Gesti\u00f3n de duplicados<\/h4>\n <p style=\"color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 15px;\">Cuando el mismo juego aparece en varios archivos:<\/p>\n <label style=\"display: flex; align-items: center; gap: 10px; cursor: pointer; margin-bottom: 10px; color: var(--text-primary); font-size: 0.95rem;\">\n <input type=\"radio\" name=\"dupeStrategy\" value=\"best\" checked style=\"accent-color: var(--neon-purple);\"> Qu\u00e9date con la que tenga los mejores metadatos (m\u00e1s informaci\u00f3n, car\u00e1tula).\n <\/label>\n <label style=\"display: flex; align-items: center; gap: 10px; cursor: pointer; margin-bottom: 10px; color: var(--text-primary); font-size: 0.95rem;\">\n <input type=\"radio\" name=\"dupeStrategy\" value=\"first\" style=\"accent-color: var(--neon-purple);\"> Conservar desde el primer archivo cargado\n <\/label>\n <label style=\"display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--text-primary); font-size: 0.95rem;\">\n <input type=\"radio\" name=\"dupeStrategy\" value=\"all\" style=\"accent-color: var(--neon-purple);\"> Conservar todo (sin deduplicaci\u00f3n)\n <\/label>\n <\/div>\n\n <div id=\"mergeProgress\" style=\"display: none; margin-bottom: 25px;\">\n <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;\">\n <span style=\"display: flex; align-items: center; gap: 10px; color: var(--text-primary);\"><span class=\"spinner\"><\/span> Fusionando...<\/span>\n <span id=\"mergeProgressPercent\" style=\"color: var(--neon-blue); font-weight: 700;\">0%<\/span>\n <\/div>\n <div class=\"progress-bar-container\">\n <div class=\"progress-bar\" id=\"mergeProgressBar\" style=\"width: 0%;\"><\/div>\n <\/div>\n <div id=\"mergeProgressFile\" style=\"margin-top: 10px; color: var(--text-secondary); font-size: 0.9rem;\"><\/div>\n <\/div>\n\n <div id=\"mergeActions\" style=\"display: none; text-align: center; padding-top: 10px;\">\n <button type=\"button\" class=\"btn btn-primary btn-large\" id=\"executeMergeBtn\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M8 6h13\"\/><path d=\"M8 12h13\"\/><path d=\"M8 18h13\"\/><path d=\"M3 6h.01\"\/><path d=\"M3 12h.01\"\/><path d=\"M3 18h.01\"\/>\n <\/svg>\n Combinar y descargar cat\u00e1logo combinado\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n<\/body>\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>Free Game Library Organizer & ROM Metadata Scraper | NES, SNES, Genesis, N64 ROMs & More| rec0m88.com Rec0m88 Game Library Organizer & ROM Metadata Scraper Identify your ROMs, fetch box art, descriptions, and ratings from IGDB & RAWG \u2014 then download everything as organized files ready for Rec0m88 and other emulator frontends. 100% local and…<\/p>","protected":false},"author":1,"featured_media":245,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-8332","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/rec0m88.com\/es\/wp-json\/wp\/v2\/pages\/8332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rec0m88.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rec0m88.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rec0m88.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rec0m88.com\/es\/wp-json\/wp\/v2\/comments?post=8332"}],"version-history":[{"count":5,"href":"https:\/\/rec0m88.com\/es\/wp-json\/wp\/v2\/pages\/8332\/revisions"}],"predecessor-version":[{"id":8360,"href":"https:\/\/rec0m88.com\/es\/wp-json\/wp\/v2\/pages\/8332\/revisions\/8360"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rec0m88.com\/es\/wp-json\/wp\/v2\/media\/245"}],"wp:attachment":[{"href":"https:\/\/rec0m88.com\/es\/wp-json\/wp\/v2\/media?parent=8332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":8332,"date":"2026-02-06T17:29:55","date_gmt":"2026-02-07T00:29:55","guid":{"rendered":"https:\/\/rec0m88.com\/?page_id=8332"},"modified":"2026-02-11T16:08:25","modified_gmt":"2026-02-11T23:08:25","slug":"game-library-organizer","status":"publish","type":"page","link":"https:\/\/rec0m88.com\/es\/game-library-organizer\/","title":{"rendered":"Organizador de la biblioteca de juegos"},"content":{"rendered":"\n\n\n \n \n \n \n Free Game Library Organizer & ROM Metadata Scraper | NES, SNES, Genesis, N64 ROMs & More| rec0m88.com<\/title>\n <meta name=\"description\" content=\"Free browser-based ROM metadata scraper and game library organizer. Automatically identify and organize your NES, SNES, N64, Genesis, PlayStation, Game Boy, and retro game collections with box art, release dates, and descriptions. 100% local processing - nothing uploaded.\">\n <meta name=\"keywords\" content=\"ROM organizer, ROM metadata scraper, retro game library, NES ROM organizer, SNES ROM manager, N64 game database, Genesis ROM identifier, PlayStation ROM scraper, Game Boy ROM organizer, retro gaming tools, emulation library manager, game collection organizer, ROM box art downloader, retro game metadata, MAME ROM organizer, Sega ROM scraper, Nintendo ROM database, game library manager, ROM identification tool, retro game catalog\">\n <meta name=\"author\" content=\"rec0m88.com\">\n <meta name=\"robots\" content=\"index, follow\">\n <link rel=\"canonical\" href=\"https:\/\/rec0m88.com\/game-library-organizer\">\n \n \n <meta property=\"og:type\" content=\"website\">\n <meta property=\"og:url\" content=\"https:\/\/rec0m88.com\/game-library-organizer\">\n <meta property=\"og:title\" content=\"Free ROM Metadata Scraper & Game Library Organizer | rec0m88.com\">\n <meta property=\"og:description\" content=\"Organize your retro game collection with automatic metadata, box art, and descriptions. Supports NES, SNES, N64, Genesis, PlayStation, and 30+ platforms.\">\n <meta property=\"og:image\" content=\"https:\/\/rec0m88.com\/images\/game-organizer-preview.jpg\">\n \n \n <meta name=\"twitter:card\" content=\"summary_large_image\">\n <meta name=\"twitter:title\" content=\"Free ROM Metadata Scraper & Game Library Organizer\">\n <meta name=\"twitter:description\" content=\"Organize your retro game collection with automatic metadata, box art, and descriptions. Supports 30+ platforms.\">\n \n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jszip\/3.10.1\/jszip.min.js\"><\/script>\n \n \n <script type=\"application\/ld+json\">\n {\n \"@context\": \"https:\/\/schema.org\",\n \"@type\": \"WebApplication\",\n \"name\": \"Game Library Organizer - ROM Metadata Scraper\",\n \"description\": \"Free browser-based tool to organize retro game ROM collections with automatic metadata scraping.\",\n \"url\": \"https:\/\/rec0m88.com\/game-library-organizer\",\n \"applicationCategory\": \"UtilitiesApplication\",\n \"operatingSystem\": \"Any (Browser-based)\",\n \"offers\": { \"@type\": \"Offer\", \"price\": \"0\", \"priceCurrency\": \"USD\" },\n \"author\": { \"@type\": \"Organization\", \"name\": \"rec0m88.com\", \"url\": \"https:\/\/rec0m88.com\" }\n }\n <\/script>\n<\/head>\n <div class=\"cyber-grid\"><\/div>\n \n <div class=\"tool-container\">\n \n <header class=\"tool-header\">\n <h1>Rec0m88 Organizador de bibliotecas de juegos y extractor de metadatos ROM<h1>\n <p class=\"subtitle\">Identifica tus ROM, obt\u00e9n car\u00e1tulas, descripciones y valoraciones de IGDB y RAWG, y luego descarga todo en forma de archivos organizados listos para Rec0m88 y otras interfaces de emuladores. 100% local y privado.<\/p>\n \n <div class=\"platform-tags\">\n <span class=\"platform-tag\">NES<\/span>\n <span class=\"platform-tag\">SNES<\/span>\n <span class=\"platform-tag\">Nintendo 64<\/span>\n <span class=\"platform-tag\">Game Boy<\/span>\n <span class=\"platform-tag\">GBA<\/span>\n <span class=\"platform-tag\">Nintendo DS<\/span>\n <span class=\"platform-tag\">G\u00e9nesis<\/span>\n <span class=\"platform-tag\">Sistema maestro<\/span>\n <span class=\"platform-tag\">Dreamcast<\/span>\n <span class=\"platform-tag\">PlayStation<\/span>\n <span class=\"platform-tag\">PS2<\/span>\n <span class=\"platform-tag\">PSP<\/span>\n <span class=\"platform-tag\">TurboGrafx-16<\/span>\n <span class=\"platform-tag\">Neo Geo<\/span>\n <span class=\"platform-tag\">Atari<\/span>\n <span class=\"platform-tag\">Sala de juegos<\/span>\n <\/div>\n <\/header>\n\n \n <section class=\"tool-section\" id=\"apiSection\">\n <div class=\"section-header\">\n <div class=\"section-icon\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"url(#iconGradient)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <defs>\n <lineargradient id=\"iconGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n <stop offset=\"0%\" style=\"stop-color:#00f0ff\"\/>\n <stop offset=\"100%\" style=\"stop-color:#bf00ff\"\/>\n <\/lineargradient>\n <\/defs>\n <path d=\"M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4\"\/>\n <\/svg>\n <\/div>\n <div>\n <div class=\"section-title\">Conectar bases de datos de juegos<\/div>\n <div class=\"section-subtitle\">Elija una o ambas API para obtener los mejores resultados de coincidencia.<\/div>\n <\/div>\n <\/div>\n\n <div class=\"api-tabs\">\n <button type=\"button\" class=\"api-tab active\" data-api=\"rawg\" id=\"rawgTab\">\n <span class=\"api-tab-icon rawg\">R<\/span>\n RAWG.io\n <span class=\"status-dot\" id=\"rawgDot\"><\/span>\n <\/button>\n <button type=\"button\" class=\"api-tab\" data-api=\"igdb\" id=\"igdbTab\">\n <span class=\"api-tab-icon igdb\">I<\/span>\n IGDB (Twitch)\n <span class=\"status-dot\" id=\"igdbDot\"><\/span>\n <\/button>\n <\/div>\n\n \n <div class=\"api-panel active\" id=\"rawgPanel\">\n <div class=\"provider-badge\">\n <div class=\"provider-badge-icon rawg\">R<\/div>\n <div class=\"provider-badge-text\">\n <h3>Base de datos de videojuegos RAWG<\/h3>\n <span>M\u00e1s de 500,000 juegos \u2022 20,000 solicitudes gratuitas al mes<\/span>\n <\/div>\n <\/div>\n\n <div class=\"instructions-box\">\n <div class=\"instructions-header\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/>\n <polyline points=\"14 2 14 8 20 8\"\/>\n <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"\/>\n <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"\/>\n <polyline points=\"10 9 9 9 8 9\"\/>\n <\/svg>\n C\u00f3mo obtener su clave API RAWG gratuita\n <\/div>\n <ol>\n <li>Ir a <a href=\"https:\/\/rawg.io\/apidocs\" target=\"_blank\" rel=\"noopener\">rawg.io\/apidocs<\/a><\/li>\n <li>Haga clic en el <strong>\u201cObtener clave API\u201d<\/strong> bot\u00f3n<\/li>\n <li>Crea una cuenta o inicia sesi\u00f3n con Google\/GitHub.<\/li>\n <li>Tu clave API se mostrar\u00e1 en la p\u00e1gina.<\/li>\n <li>Copia la clave y p\u00e9gala a continuaci\u00f3n.<\/li>\n <\/ol>\n <div class=\"tip-box\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n <line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"\/>\n <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"\/>\n <\/svg>\n <span><strong>Consejo profesional:<\/strong> El nivel gratuito te ofrece 20 000 solicitudes al mes, \u00a1suficientes para organizar grandes colecciones!<\/span>\n <\/div>\n <\/div>\n\n <div class=\"input-group\">\n <div class=\"input-wrapper\" style=\"flex: 2;\">\n <label for=\"rawgKeyInput\">Clave API RAWG<\/label>\n <input type=\"text\" id=\"rawgKeyInput\" class=\"input-field\" placeholder=\"Pega aqu\u00ed tu clave API de RAWG...\" autocomplete=\"off\" \/>\n <\/div>\n <div class=\"input-wrapper\" style=\"flex: 0; align-self: flex-end;\">\n <button type=\"button\" class=\"btn btn-rawg\" id=\"rawgValidateBtn\">\n <span id=\"rawgValidateBtnText\">Validar<\/span>\n <\/button>\n <\/div>\n <\/div>\n <div id=\"rawgStatus\" class=\"status-message\"><\/div>\n <\/div>\n\n \n <div class=\"api-panel\" id=\"igdbPanel\">\n <div class=\"provider-badge\">\n <div class=\"provider-badge-icon igdb\">I<\/div>\n <div class=\"provider-badge-text\">\n <h3>IGDB \u2013 Base de datos de juegos en Internet<\/h3>\n <span>Desarrollado por Twitch \u2022 Metadatos detallados \u2022 4 solicitudes por segundo<\/span>\n <\/div>\n <\/div>\n\n <div class=\"instructions-box\">\n <div class=\"instructions-header\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/>\n <polyline points=\"14 2 14 8 20 8\"\/>\n <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"\/>\n <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"\/>\n <polyline points=\"10 9 9 9 8 9\"\/>\n <\/svg>\n C\u00f3mo obtener tus credenciales gratuitas de IGDB\/Twitch\n <\/div>\n <ol>\n <li>Ir a <a href=\"https:\/\/dev.twitch.tv\/console\" target=\"_blank\" rel=\"noopener\">dev.twitch.tv\/console<\/a><\/li>\n <li>Inicia sesi\u00f3n con tu cuenta de Twitch (crea una gratis si es necesario).<\/li>\n <li>Haga clic <strong>\u201cRegistra tu solicitud\u201d<\/strong><\/li>\n <li>Rellene el formulario:\n <ul>\n <li><strong>Nombre:<\/strong> Cualquier nombre (por ejemplo, \u201cMi organizador de juegos\u201d).<\/li>\n <li><strong>URL de redireccionamiento de OAuth:<\/strong> <code>https:\/\/localhost<\/code><\/li>\n <li><strong>Categor\u00eda:<\/strong> Seleccione \u201cIntegraci\u00f3n de aplicaciones\u201d.\u201d<\/li>\n <\/ul>\n <\/li>\n <li>Haga clic <strong>\u201cCrear\u201d<\/strong><\/li>\n <li>Haga clic <strong>\u201cAdministrar\u201d<\/strong> en su nueva solicitud<\/li>\n <li>Copia tu <strong>Identificaci\u00f3n del cliente<\/strong><\/li>\n <li>Haga clic <strong>\u201cNuevo secreto\u201d<\/strong> y copie el secreto generado<\/li>\n <li>Pega ambos valores a continuaci\u00f3n y haz clic en <strong>Validar<\/strong><\/li>\n <\/ol>\n\n <div style=\"margin-top: 20px; padding: 18px 22px; background: var(--bg-primary); border: 1px solid rgba(255, 170, 0, 0.3); border-radius: 12px;\">\n <div style=\"display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--warning); font-weight: 600; font-size: 0.95rem;\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"width: 20px; height: 20px;\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/>\n <\/svg>\n Caducidad y actualizaci\u00f3n de tokens\n <\/div>\n <p style=\"color: var(--text-secondary); font-size: 0.88rem; line-height: 1.7; margin-bottom: 12px;\">\n Tu token de acceso es v\u00e1lido durante aproximadamente <strong style=\"color: var(--text-primary);\">60 d\u00edas<\/strong>. Cuando caduque, aparecer\u00e1n errores de conexi\u00f3n durante el escaneo.\n <\/p>\n <p style=\"color: var(--text-secondary); font-size: 0.88rem; line-height: 1.7; font-weight: 600; margin-bottom: 10px;\">\n Para actualizar su token:\n <\/p>\n <ol style=\"margin-left: 20px; color: var(--text-secondary); font-size: 0.88rem; line-height: 1.8;\">\n <li>Tu <strong style=\"color: var(--text-primary);\">Identificaci\u00f3n del cliente<\/strong> y <strong style=\"color: var(--text-primary);\">Secreto del cliente<\/strong> nunca caducan, no necesitas otros nuevos<\/li>\n <li>Simplemente haga clic en el <strong style=\"color: var(--neon-purple);\">Validar<\/strong> bot\u00f3n de nuevo: genera autom\u00e1ticamente un nuevo token.<\/li>\n <li>\u00a1Eso es todo! El nuevo token se ha guardado y est\u00e1 listo para usar.<\/li>\n <\/ol>\n <div style=\"margin-top: 14px; padding: 12px 16px; background: rgba(255, 170, 0, 0.08); border: 1px solid rgba(255, 170, 0, 0.2); border-radius: 8px; font-size: 0.82rem; color: var(--warning); display: flex; align-items: flex-start; gap: 8px;\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px;\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/>\n <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/>\n <\/svg>\n <span>Si alguna vez haces clic en <strong>\u201cNuevo secreto\u201d<\/strong> En la consola de Twitch, tu antiguo secreto queda invalidado de forma permanente. Tendr\u00e1s que pegar aqu\u00ed el nuevo secreto y volver a validarlo. Hazlo solo si tu secreto se ha visto comprometido.<\/span>\n <\/div>\n <\/div>\n <div class=\"tip-box\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n <line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"\/>\n <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"\/>\n <\/svg>\n <span><strong>Consejo profesional:<\/strong> IGDB cuenta con datos excelentes sobre los juegos m\u00e1s recientes e incluye sinopsis detalladas, capturas de pantalla y videos.<\/span>\n <\/div>\n <\/div>\n\n <div class=\"input-group\">\n <div class=\"input-wrapper\">\n <label for=\"igdbClientId\">ID de cliente de Twitch<\/label>\n <input type=\"text\" id=\"igdbClientId\" class=\"input-field\" placeholder=\"Su n\u00famero de identificaci\u00f3n de cliente...\" autocomplete=\"off\" \/>\n <\/div>\n <div class=\"input-wrapper\">\n <label for=\"igdbClientSecret\">Secreto del cliente de Twitch<\/label>\n <input type=\"password\" id=\"igdbClientSecret\" class=\"input-field\" placeholder=\"Tu secreto de cliente...\" autocomplete=\"off\" \/>\n <\/div>\n <div class=\"input-wrapper\" style=\"flex: 0; align-self: flex-end;\">\n <button type=\"button\" class=\"btn btn-igdb\" id=\"igdbValidateBtn\">\n <span id=\"igdbValidateBtnText\">Validar<\/span>\n <\/button>\n <\/div>\n <\/div>\n <div id=\"igdbStatus\" class=\"status-message\"><\/div>\n <\/div>\n\n \n <div class=\"enabled-apis\" id=\"enabledApis\">\n <span class=\"enabled-apis-label\">API activas:<\/span>\n <div id=\"enabledApisList\"><\/div>\n <\/div>\n\n \n <div class=\"api-mode-selector\" id=\"apiModeSelector\" style=\"display: none; margin-top: 20px; padding: 20px 25px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 14px;\">\n <h4 style=\"color: var(--neon-purple); margin-bottom: 12px; font-size: 0.95rem; display: flex; align-items: center; gap: 8px;\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"width: 18px; height: 18px;\"><circle cx=\"12\" cy=\"12\" r=\"3\"\/><path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z\"\/><\/svg>\n Modo Multi-API\n <\/h4>\n <p style=\"color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 15px;\">Tanto RAWG como IGDB est\u00e1n conectados. Elige c\u00f3mo utilizarlos:<\/p>\n <div style=\"display: flex; flex-direction: column; gap: 10px;\">\n <label style=\"display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 12px 16px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 10px; transition: all 0.3s;\" class=\"api-mode-option\" data-mode=\"merge\">\n <input type=\"radio\" name=\"apiMode\" value=\"merge\" checked style=\"accent-color: var(--neon-purple); margin-top: 3px;\">\n <div>\n <div style=\"color: var(--text-primary); font-weight: 600; font-size: 0.95rem;\">Combinar datos <span style=\"color: var(--success); font-size: 0.8rem; font-weight: 500;\">(Recomendado)<\/span><\/div>\n <div style=\"color: var(--text-secondary); font-size: 0.82rem; margin-top: 3px;\">Consulta ambas API y combina los mejores datos de cada una: la mejor imagen, la descripci\u00f3n m\u00e1s extensa, todos los g\u00e9neros fusionados, la calificaci\u00f3n m\u00e1s alta.<\/div>\n <\/div>\n <\/label>\n <label style=\"display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 12px 16px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 10px; transition: all 0.3s;\" class=\"api-mode-option\" data-mode=\"best\">\n <input type=\"radio\" name=\"apiMode\" value=\"best\" style=\"accent-color: var(--neon-purple); margin-top: 3px;\">\n <div>\n <div style=\"color: var(--text-primary); font-weight: 600; font-size: 0.95rem;\">Mejor coincidencia<\/div>\n <div style=\"color: var(--text-secondary); font-size: 0.82rem; margin-top: 3px;\">Consulta ambas API, pero selecciona el \u00fanico resultado con la puntuaci\u00f3n de confianza de coincidencia m\u00e1s alta.<\/div>\n <\/div>\n <\/label>\n <label style=\"display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 12px 16px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 10px; transition: all 0.3s;\" class=\"api-mode-option\" data-mode=\"rawg\">\n <input type=\"radio\" name=\"apiMode\" value=\"rawg\" style=\"accent-color: var(--neon-purple); margin-top: 3px;\">\n <div>\n <div style=\"color: var(--text-primary); font-weight: 600; font-size: 0.95rem;\">Solo RAWG<\/div>\n <div style=\"color: var(--text-secondary); font-size: 0.82rem; margin-top: 3px;\">Utiliza solo RAWG: excelentes im\u00e1genes de fondo, ideales para t\u00edtulos m\u00e1s recientes.<\/div>\n <\/div>\n <\/label>\n <label style=\"display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 12px 16px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 10px; transition: all 0.3s;\" class=\"api-mode-option\" data-mode=\"igdb\">\n <input type=\"radio\" name=\"apiMode\" value=\"igdb\" style=\"accent-color: var(--neon-purple); margin-top: 3px;\">\n <div>\n <div style=\"color: var(--text-primary); font-weight: 600; font-size: 0.95rem;\">Solo IGDB<\/div>\n <div style=\"color: var(--text-secondary); font-size: 0.82rem; margin-top: 3px;\">Solo usa IGDB: res\u00famenes detallados y argumentos, ideal para t\u00edtulos retro.<\/div>\n <\/div>\n <\/label>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"tool-section\" id=\"uploadSection\">\n <div class=\"upload-area\">\n <div class=\"upload-visual\">\n <svg viewbox=\"0 0 100 100\" fill=\"none\">\n <defs>\n <lineargradient id=\"uploadGrad\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n <stop offset=\"0%\" style=\"stop-color:#00f0ff\"\/>\n <stop offset=\"50%\" style=\"stop-color:#bf00ff\"\/>\n <stop offset=\"100%\" style=\"stop-color:#ff00aa\"\/>\n <\/lineargradient>\n <\/defs>\n <rect x=\"15\" y=\"25\" width=\"70\" height=\"55\" rx=\"8\" stroke=\"url(#uploadGrad)\" stroke-width=\"2\" fill=\"none\"\/>\n <path d=\"M35 45 L50 30 L65 45\" stroke=\"url(#uploadGrad)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"\/>\n <line x1=\"50\" y1=\"30\" x2=\"50\" y2=\"60\" stroke=\"url(#uploadGrad)\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <rect x=\"25\" y=\"15\" width=\"15\" height=\"20\" rx=\"3\" stroke=\"url(#uploadGrad)\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.5\"\/>\n <rect x=\"60\" y=\"15\" width=\"15\" height=\"20\" rx=\"3\" stroke=\"url(#uploadGrad)\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.5\"\/>\n <\/svg>\n <\/div>\n <h2 class=\"upload-title\">Selecciona tu carpeta ROM<\/h2>\n <p class=\"upload-subtitle\">Elige una carpeta o los archivos que contengan las ROM de tus juegos. Todo se procesa de manera local, nada sale de tu computadora.<\/p>\n \n \n \n \n <div class=\"rom-path-section\">\n <div class=\"rom-path-header\">\n <div class=\"rom-path-title\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"width: 20px; height: 20px;\">\n <path d=\"M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z\"\/>\n <line x1=\"12\" y1=\"11\" x2=\"12\" y2=\"17\"\/>\n <line x1=\"9\" y1=\"14\" x2=\"15\" y2=\"14\"\/>\n <\/svg>\n <span>Ruta de la carpeta ROM<\/span>\n <\/div>\n <span class=\"rom-path-hint\">Necesario para la integraci\u00f3n del emulador y las rutas de archivo precisas.<\/span>\n <\/div>\n \n <div class=\"rom-path-description\">\n <p>Ingrese el <strong>ruta completa del sistema<\/strong> a tu carpeta ROM. Esto garantiza que los cat\u00e1logos exportados contengan rutas completas que tu emulador pueda utilizar directamente.<\/p>\n <\/div>\n \n <div class=\"rom-path-input-group\">\n <div class=\"rom-path-input-wrapper\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"rom-path-input-icon\">\n <path d=\"M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z\"\/>\n <\/svg>\n <input type=\"text\" id=\"romBasePath\" \n placeholder=\"Por ejemplo, D:\\Emulaci\u00f3n\\ROMs o \/home\/usuario\/roms.\" \n class=\"rom-path-input\" \n autocomplete=\"off\" \/>\n <\/div>\n <button type=\"button\" class=\"btn btn-save-path\" id=\"saveRomPath\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z\"\/>\n <polyline points=\"17 21 17 13 7 13 7 21\"\/>\n <polyline points=\"7 3 7 8 15 8\"\/>\n <\/svg>\n Guardar ruta\n <\/button>\n <\/div>\n \n <div id=\"romPathStatus\" class=\"rom-path-status\"><\/div>\n \n \n <div id=\"folderStructureInfo\" class=\"folder-structure-info\" style=\"display: none;\"><\/div>\n \n \n <div id=\"pathPreview\" class=\"path-preview\" style=\"display: none;\"><\/div>\n \n <div class=\"rom-path-examples\">\n <div class=\"example-header\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"width: 14px; height: 14px;\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n <line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"\/>\n <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"\/>\n <\/svg>\n Ejemplos de estructuras de carpetas:\n <\/div>\n <div class=\"example-grid\">\n <div class=\"example-item\">\n <code>D:\\Juegos\\<\/code>\n <span class=\"example-subfolders\">nes\\ snes\\ n64\\ gba\\<\/span>\n <\/div>\n <div class=\"example-item\">\n <code>\/casa\/usuario\/roms\/<\/code>\n <span class=\"example-subfolders\">NES\/ SNES\/ PSX\/<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"upload-buttons\">\n <button type=\"button\" class=\"btn btn-primary btn-large\" id=\"browseFolderBtn\" disabled>\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z\"\/>\n <\/svg>\n Buscar carpeta\n <\/button>\n <button type=\"button\" class=\"btn btn-secondary btn-large\" id=\"browseFilesBtn\" disabled>\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z\"\/>\n <polyline points=\"13 2 13 9 20 9\"\/>\n <\/svg>\n Seleccionar una sola ROM\n <\/button>\n <\/div>\n\n <input type=\"file\" id=\"folderInput\" class=\"file-input-hidden\" webkitdirectory directory multiple \/>\n <input type=\"file\" id=\"filesInput\" class=\"file-input-hidden\" multiple accept=\".zip,.7z,.rar,.nes,.sfc,.smc,.gb,.gbc,.gba,.n64,.z64,.v64,.nds,.3ds,.md,.gen,.bin,.sms,.gg,.iso,.cue,.chd,.psx,.pbp,.pce,.a26,.a78,.lnx,.col,.ngp,.ngc,.ws,.wsc,.wad,.wbfs,.fds,.32x,.scd,.gcm,.gcz,.rvz,.wux,.nsp,.xci\" \/>\n\n <div class=\"security-badge\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"\/>\n <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"\/>\n <\/svg>\n <div>\n <strong>Procesamiento local 100%: tus archivos nunca salen de tu computadora.<\/strong>\n <p style=\"margin: 4px 0 0 0; font-size: 0.85em; opacity: 0.8;\">\n Es posible que su navegador le advierta de que los archivos se \u201ccargar\u00e1n\u201d; se trata de una frase est\u00e1ndar del navegador. Sus archivos se procesan. <em>totalmente en tu navegador<\/em> y son <strong>nunca enviado a ning\u00fan servidor<\/strong>.\n <\/p>\n <\/div>\n<\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"tool-section progress-section\" id=\"progressSection\">\n <div class=\"progress-header\">\n <div class=\"progress-title\">\n <span class=\"spinner\"><\/span>\n Juegos de escanear y emparejar...\n <\/div>\n <span class=\"progress-percent\" id=\"progressPercent\">0%<\/span>\n <\/div>\n <div class=\"progress-bar-container\">\n <div class=\"progress-bar\" id=\"progressBar\"><\/div>\n <\/div>\n <div class=\"current-file\" id=\"currentFile\">Preparando...<\/div>\n <div class=\"progress-stats\">\n <div class=\"stat-card\">\n <div class=\"stat-value\" id=\"statTotal\">0<\/div>\n <div class=\"stat-label\">Archivos encontrados<\/div>\n <\/div>\n <div class=\"stat-card\">\n <div class=\"stat-value\" id=\"statProcessed\">0<\/div>\n <div class=\"stat-label\">Procesado<\/div>\n <\/div>\n <div class=\"stat-card\">\n <div class=\"stat-value\" id=\"statMatched\">0<\/div>\n <div class=\"stat-label\">Emparejado<\/div>\n <\/div>\n <div class=\"stat-card\">\n <div class=\"stat-value\" id=\"statUnmatched\">0<\/div>\n <div class=\"stat-label\">Inigualable<\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n<section class=\"results-section\" id=\"resultsSection\">\n <div class=\"tool-section\" style=\"padding: 25px 35px;\">\n <div class=\"results-header\">\n <h2 class=\"results-title\">Tu biblioteca organizada<\/h2>\n <\/div>\n \n \n <div class=\"export-options-grid\" style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin: 25px 0;\">\n \n \n <div class=\"export-option\" style=\"background: linear-gradient(135deg, rgba(0, 240, 255, 0.1), rgba(191, 0, 255, 0.1)); border: 2px solid var(--neon-blue); border-radius: 12px; padding: 18px; position: relative;\">\n <span style=\"position: absolute; top: -10px; right: 15px; background: var(--neon-blue); color: var(--bg-primary); font-size: 0.7rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; text-transform: uppercase;\">Recomendado<\/span>\n <button type=\"button\" class=\"btn btn-primary\" id=\"exportHtmlBtn\" style=\"width: 100%; margin-bottom: 12px;\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"16 18 22 12 16 6\"\/>\n <polyline points=\"8 6 2 12 8 18\"\/>\n <\/svg>\n Cat\u00e1logo Rec0m88\n <\/button>\n <p style=\"color: var(--text-secondary); font-size: 0.82rem; line-height: 1.5; margin: 0;\">\n <strong style=\"color: var(--neon-blue);\">El administrador de juegos para el emulador Rec0m88.<\/strong> Explora tus juegos con im\u00e1genes de las cajas, descripciones y ejec\u00fatalos directamente.\n <\/p>\n <\/div>\n \n \n <div class=\"export-option\" style=\"background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; padding: 18px;\">\n <button type=\"button\" class=\"btn btn-secondary\" id=\"exportEsBtn\" style=\"width: 100%; margin-bottom: 12px;\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\" ry=\"2\"\/>\n <line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"\/>\n <line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"\/>\n <\/svg>\n Estaci\u00f3n de emulaci\u00f3n\n <\/button>\n <p style=\"color: var(--text-secondary); font-size: 0.82rem; line-height: 1.5; margin: 0;\">\n <strong style=\"color: var(--neon-purple);\">Formato XML para RetroArch, Batocera, RetroPie,<\/strong> y otras interfaces basadas en EmulationStation.\n <\/p>\n <\/div>\n \n \n <div class=\"export-option\" style=\"background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; padding: 18px;\">\n <button type=\"button\" class=\"btn btn-secondary\" id=\"exportLibraryJsonBtn\" style=\"width: 100%; margin-bottom: 12px;\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/>\n <polyline points=\"14 2 14 8 20 8\"\/>\n <\/svg>\n Biblioteca JSON (v2)\n <\/button>\n <p style=\"color: var(--text-secondary); font-size: 0.82rem; line-height: 1.5; margin: 0;\">\n <strong style=\"color: var(--neon-cyan);\">Para el emulador y visor Rec0m88.<\/strong> El archivo de datos que carga library-viewer.html.\n <\/p>\n <\/div>\n\n \n <div class=\"export-option\" style=\"background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; padding: 18px;\">\n <button type=\"button\" class=\"btn btn-secondary\" id=\"exportJsonBtn\" style=\"width: 100%; margin-bottom: 12px;\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/>\n <polyline points=\"14 2 14 8 20 8\"\/>\n <\/svg>\n JSON (heredado)\n <\/button>\n <p style=\"color: var(--text-secondary); font-size: 0.82rem; line-height: 1.5; margin: 0;\">\n <strong style=\"color: var(--neon-purple);\">Datos sin procesar para desarrolladores.<\/strong> Formato plano para herramientas personalizadas o importaci\u00f3n de hojas de c\u00e1lculo.\n <\/p>\n <\/div>\n \n \n <div class=\"export-option\" style=\"background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; padding: 18px;\">\n <button type=\"button\" class=\"btn btn-secondary\" id=\"exportCsvBtn\" style=\"width: 100%; margin-bottom: 12px;\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"\/>\n <line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\"\/>\n <line x1=\"9\" y1=\"3\" x2=\"9\" y2=\"21\"\/>\n <\/svg>\n Hoja de c\u00e1lculo CSV\n <\/button>\n <p style=\"color: var(--text-secondary); font-size: 0.82rem; line-height: 1.5; margin: 0;\">\n <strong style=\"color: var(--neon-purple);\">Se abre en Excel o Google Sheets.<\/strong> Ideal para ver tu colecci\u00f3n como una lista ordenable.\n <\/p>\n <\/div>\n <\/div>\n \n \n <div style=\"display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; padding-top: 15px; border-top: 1px solid var(--border);\">\n <button type=\"button\" class=\"btn btn-primary\" id=\"downloadArtBtn\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/>\n <polyline points=\"7 10 12 15 17 10\"\/>\n <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/>\n <\/svg>\n Descargar arte de la caja\n <\/button>\n <button type=\"button\" class=\"btn btn-secondary\" id=\"resetBtn\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"23 4 23 10 17 10\"\/>\n <path d=\"M20.49 15a9 9 0 1 1-2.12-9.36L23 10\"\/>\n <\/svg>\n Nuevo escaneo\n <\/button>\n <\/div>\n <\/div>\n\n <div class=\"filter-tabs\" id=\"filterTabs\">\n <button type=\"button\" class=\"filter-tab active\" data-filter=\"all\">\n Todos los juegos <span class=\"count\" id=\"countAll\">0<\/span>\n <\/button>\n <button type=\"button\" class=\"filter-tab\" data-filter=\"matched\">\n \u2713 Emparejado <span class=\"count\" id=\"countMatched\">0<\/span>\n <\/button>\n <button type=\"button\" class=\"filter-tab\" data-filter=\"unmatched\">\n \u2717 Inigualable <span class=\"count\" id=\"countUnmatched\">0<\/span>\n <\/button>\n <\/div>\n\n <div class=\"search-box\">\n <div class=\"search-wrapper\">\n <svg class=\"search-icon\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"\/>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/>\n <\/svg>\n <input type=\"text\" id=\"searchInput\" placeholder=\"Busca en tu biblioteca...\" \/>\n <\/div>\n <\/div>\n\n <div class=\"games-grid\" id=\"gamesGrid\"><\/div>\n<\/section>\n\n\n<section class=\"tool-section\" id=\"mergeSection\">\n <div class=\"section-header\">\n <div class=\"section-icon\" style=\"background: linear-gradient(135deg, rgba(191, 0, 255, 0.1), rgba(255, 0, 170, 0.1)); border-color: rgba(191, 0, 255, 0.3);\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"url(#mergeIconGrad)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <defs>\n <lineargradient id=\"mergeIconGrad\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n <stop offset=\"0%\" style=\"stop-color:#bf00ff\"\/>\n <stop offset=\"100%\" style=\"stop-color:#ff00aa\"\/>\n <\/lineargradient>\n <\/defs>\n <path d=\"M8 6h13\"\/><path d=\"M8 12h13\"\/><path d=\"M8 18h13\"\/><path d=\"M3 6h.01\"\/><path d=\"M3 12h.01\"\/><path d=\"M3 18h.01\"\/>\n <\/svg>\n <\/div>\n <div>\n <div class=\"section-title\" style=\"background: linear-gradient(135deg, var(--neon-purple), var(--neon-pink)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;\">Combinar archivos JSON Rec0m88<\/div>\n <div class=\"section-subtitle\">Combina varios archivos de cat\u00e1logo exportados en una colecci\u00f3n unificada.<\/div>\n <\/div>\n <\/div>\n <p style=\"color: var(--text-secondary); margin-bottom: 20px; font-size: 0.95rem; line-height: 1.6;\">\n \u00bfTienes varias exportaciones del cat\u00e1logo Rec0m88 de diferentes sesiones de escaneo? Selecci\u00f3nalas todas y comb\u00ednalas en un \u00fanico archivo organizado con detecci\u00f3n autom\u00e1tica de duplicados.\n <\/p>\n <div style=\"display: flex; gap: 15px; align-items: center; flex-wrap: wrap;\">\n <button type=\"button\" class=\"btn btn-secondary\" id=\"openMergeBtn\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M8 6h13\"\/><path d=\"M8 12h13\"\/><path d=\"M8 18h13\"\/><path d=\"M3 6h.01\"\/><path d=\"M3 12h.01\"\/><path d=\"M3 18h.01\"\/>\n <\/svg>\n Seleccionar y combinar cat\u00e1logos\n <\/button>\n <span style=\"color: var(--text-muted); font-size: 0.85rem;\">No se necesita clave API: funciona con cualquier archivo HTML exportado.<\/span>\n <\/div>\n <input type=\"file\" id=\"mergeFilesInput\" class=\"file-input-hidden\" multiple accept=\".json\" \/>\n<\/section>\n<\/div>\n\n\n<div class=\"toast-container\" id=\"toastContainer\"><\/div>\n\n\n<div class=\"modal-overlay\" id=\"gameModal\">\n <div class=\"modal\">\n <div class=\"modal-header\">\n <h3 id=\"modalTitle\">Detalles del juego<\/h3>\n <button type=\"button\" class=\"modal-close\" id=\"modalCloseBtn\">\u00d7<\/button>\n <\/div>\n <div class=\"modal-body\" id=\"modalBody\"><\/div>\n <\/div>\n<\/div>\n\n\n<div class=\"modal-overlay\" id=\"mergeModal\">\n <div class=\"modal\" style=\"max-width: 750px;\">\n <div class=\"modal-header\">\n <h3 id=\"mergeModalTitle\">Combinar cat\u00e1logos HTML<\/h3>\n <button type=\"button\" class=\"modal-close\" id=\"mergeModalCloseBtn\">\u00d7<\/button>\n <\/div>\n <div class=\"modal-body\" id=\"mergeModalBody\">\n <div style=\"text-align: center; padding: 20px 0 30px;\">\n <div style=\"width: 80px; height: 80px; margin: 0 auto 20px; position: relative;\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"url(#mergeGrad)\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"width: 100%; height: 100%;\">\n <defs>\n <lineargradient id=\"mergeGrad\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n <stop offset=\"0%\" style=\"stop-color:#bf00ff\"\/>\n <stop offset=\"100%\" style=\"stop-color:#ff00aa\"\/>\n <\/lineargradient>\n <\/defs>\n <rect x=\"2\" y=\"3\" width=\"7\" height=\"9\" rx=\"1.5\"\/>\n <rect x=\"15\" y=\"3\" width=\"7\" height=\"9\" rx=\"1.5\"\/>\n <rect x=\"8.5\" y=\"14\" width=\"7\" height=\"9\" rx=\"1.5\"\/>\n <path d=\"M5.5 12 L9.5 14\"\/>\n <path d=\"M18.5 12 L14.5 14\"\/>\n <\/svg>\n <\/div>\n <h3 style=\"font-size: 1.3rem; margin-bottom: 10px; background: linear-gradient(135deg, var(--neon-purple), var(--neon-pink)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;\">Combinar varios cat\u00e1logos<\/h3>\n <p style=\"color: var(--text-secondary); max-width: 450px; margin: 0 auto 25px; font-size: 0.95rem; line-height: 1.6;\">\n Seleccione todos los archivos JSON del cat\u00e1logo exportados. Los duplicados se detectan y eliminan autom\u00e1ticamente.\n <\/p>\n <button type=\"button\" class=\"btn btn-primary\" id=\"selectMergeFilesBtn\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z\"\/>\n <polyline points=\"13 2 13 9 20 9\"\/>\n <\/svg>\n Seleccionar archivos JSON de Recom88\n <\/button>\n <\/div>\n\n <div id=\"mergeFilesList\" style=\"display: none; margin-bottom: 25px;\">\n <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;\">\n <h4 style=\"color: var(--neon-blue); font-size: 1rem;\">Archivos cargados<\/h4>\n <button type=\"button\" class=\"btn btn-secondary\" id=\"addMoreFilesBtn\" style=\"padding: 8px 16px; font-size: 0.85rem;\">\n + A\u00f1adir m\u00e1s archivos\n <\/button>\n <\/div>\n <div id=\"mergeFilesListInner\" style=\"max-height: 200px; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-secondary);\"><\/div>\n <\/div>\n\n <div id=\"mergeStats\" style=\"display: none; margin-bottom: 25px;\">\n <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px;\">\n <div class=\"stat-card\">\n <div class=\"stat-value\" id=\"mergeStatFiles\">0<\/div>\n <div class=\"stat-label\">Archivos<\/div>\n <\/div>\n <div class=\"stat-card\">\n <div class=\"stat-value\" id=\"mergeStatTotal\">0<\/div>\n <div class=\"stat-label\">Total de juegos<\/div>\n <\/div>\n <div class=\"stat-card\">\n <div class=\"stat-value\" id=\"mergeStatUnique\">0<\/div>\n <div class=\"stat-label\">\u00danico<\/div>\n <\/div>\n <div class=\"stat-card\">\n <div class=\"stat-value\" id=\"mergeStatDupes\">0<\/div>\n <div class=\"stat-label\">Duplicados<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div id=\"mergeDupeOptions\" style=\"display: none; margin-bottom: 25px; padding: 20px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px;\">\n <h4 style=\"color: var(--neon-pink); margin-bottom: 12px; font-size: 0.95rem;\">Gesti\u00f3n de duplicados<\/h4>\n <p style=\"color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 15px;\">Cuando el mismo juego aparece en varios archivos:<\/p>\n <label style=\"display: flex; align-items: center; gap: 10px; cursor: pointer; margin-bottom: 10px; color: var(--text-primary); font-size: 0.95rem;\">\n <input type=\"radio\" name=\"dupeStrategy\" value=\"best\" checked style=\"accent-color: var(--neon-purple);\"> Qu\u00e9date con la que tenga los mejores metadatos (m\u00e1s informaci\u00f3n, car\u00e1tula).\n <\/label>\n <label style=\"display: flex; align-items: center; gap: 10px; cursor: pointer; margin-bottom: 10px; color: var(--text-primary); font-size: 0.95rem;\">\n <input type=\"radio\" name=\"dupeStrategy\" value=\"first\" style=\"accent-color: var(--neon-purple);\"> Conservar desde el primer archivo cargado\n <\/label>\n <label style=\"display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--text-primary); font-size: 0.95rem;\">\n <input type=\"radio\" name=\"dupeStrategy\" value=\"all\" style=\"accent-color: var(--neon-purple);\"> Conservar todo (sin deduplicaci\u00f3n)\n <\/label>\n <\/div>\n\n <div id=\"mergeProgress\" style=\"display: none; margin-bottom: 25px;\">\n <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;\">\n <span style=\"display: flex; align-items: center; gap: 10px; color: var(--text-primary);\"><span class=\"spinner\"><\/span> Fusionando...<\/span>\n <span id=\"mergeProgressPercent\" style=\"color: var(--neon-blue); font-weight: 700;\">0%<\/span>\n <\/div>\n <div class=\"progress-bar-container\">\n <div class=\"progress-bar\" id=\"mergeProgressBar\" style=\"width: 0%;\"><\/div>\n <\/div>\n <div id=\"mergeProgressFile\" style=\"margin-top: 10px; color: var(--text-secondary); font-size: 0.9rem;\"><\/div>\n <\/div>\n\n <div id=\"mergeActions\" style=\"display: none; text-align: center; padding-top: 10px;\">\n <button type=\"button\" class=\"btn btn-primary btn-large\" id=\"executeMergeBtn\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M8 6h13\"\/><path d=\"M8 12h13\"\/><path d=\"M8 18h13\"\/><path d=\"M3 6h.01\"\/><path d=\"M3 12h.01\"\/><path d=\"M3 18h.01\"\/>\n <\/svg>\n Combinar y descargar cat\u00e1logo combinado\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n<\/body>\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>Free Game Library Organizer & ROM Metadata Scraper | NES, SNES, Genesis, N64 ROMs & More| rec0m88.com Rec0m88 Game Library Organizer & ROM Metadata Scraper Identify your ROMs, fetch box art, descriptions, and ratings from IGDB & RAWG \u2014 then download everything as organized files ready for Rec0m88 and other emulator frontends. 100% local and…<\/p>","protected":false},"author":1,"featured_media":245,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-8332","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/rec0m88.com\/es\/wp-json\/wp\/v2\/pages\/8332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rec0m88.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rec0m88.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rec0m88.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rec0m88.com\/es\/wp-json\/wp\/v2\/comments?post=8332"}],"version-history":[{"count":5,"href":"https:\/\/rec0m88.com\/es\/wp-json\/wp\/v2\/pages\/8332\/revisions"}],"predecessor-version":[{"id":8360,"href":"https:\/\/rec0m88.com\/es\/wp-json\/wp\/v2\/pages\/8332\/revisions\/8360"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rec0m88.com\/es\/wp-json\/wp\/v2\/media\/245"}],"wp:attachment":[{"href":"https:\/\/rec0m88.com\/es\/wp-json\/wp\/v2\/media?parent=8332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}