Dashboard T\u00e9cnico | Sportica Prestige<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;600;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n body { font-family: 'Montserrat', sans-serif; background-color: #ffffff; color: #000; }\r\n .dashboard-container { width: 100%; overflow-x: auto; border: 1px solid #eee; border-radius: 4px; }\r\n .table-prestige { width: 100%; border-collapse: collapse; min-width: 1000px; }\r\n .table-prestige th { text-transform: uppercase; font-size: 10px; letter-spacing: 2px; color: #999; border-bottom: 1px solid #eee; padding: 20px 15px; text-align: left; }\r\n \r\n .status-badge { padding: 5px 14px; border-radius: 20px; font-size: 9px; font-weight: 700; text-transform: uppercase; display: inline-block; white-space: nowrap; }\r\n .status-activo { background: #e6fffa; color: #38b2ac; }\r\n .status-falla { background: #fff5f5; color: #e53e3e; }\r\n .status-revision { background: #fffaf0; color: #dd6b20; }\r\n \r\n .btn-edit { color: #d4af37; font-weight: 700; font-size: 11px; transition: all 0.3s; padding: 10px 15px; cursor: pointer; }\r\n .btn-edit:hover { color: #000; background-color: #fcf8eb; }\r\n\r\n \/* --- ESTILOS DROPDOWN ESTATUS --- *\/\r\n .dropdown-status { position: relative; display: inline-block; padding-bottom: 10px; margin-bottom: -10px; }\r\n .dropdown-status:hover .dropdown-content { display: block; }\r\n .dropdown-content { \r\n display: none; \r\n position: absolute; \r\n background-color: white; \r\n min-width: 220px; \r\n box-shadow: 0px 8px 16px rgba(0,0,0,0.1); \r\n z-index: 50; \r\n border: 1px solid #eee; \r\n margin-top: 2px; \r\n }\r\n .dropdown-content::before {\r\n content: \"\";\r\n position: absolute;\r\n top: -15px;\r\n left: 0;\r\n width: 100%;\r\n height: 15px;\r\n background: transparent;\r\n }\r\n .option-item { padding: 12px 16px; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; }\r\n .option-item:hover { background-color: #fcf8eb; }\r\n \r\n .led { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 10px; }\r\n .led-online { background-color: #2ecc71; box-shadow: 0 0 8px #2ecc71; }\r\n .led-club { background-color: #3498db; box-shadow: 0 0 8px #3498db; }\r\n .led-dev { background-color: #9b59b6; box-shadow: 0 0 8px #9b59b6; }\r\n .led-offline { background-color: #e74c3c; box-shadow: 0 0 8px #e74c3c; }\r\n\r\n @keyframes alertaPulso {\r\n 0% { background-color: #fff; }\r\n 50% { background-color: #fff5f5; }\r\n 100% { background-color: #fff; }\r\n }\r\n .alerta-tiempo { animation: alertaPulso 2s infinite; border-left: 4px solid #e53e3e !important; }\r\n <\/style>\r\n<\/head>\r\n<body class=\"p-4 md:p-10\">\r\n\r\n <div class=\"max-w-7xl mx-auto\">\r\n <header class=\"flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-6\">\r\n <div class=\"flex flex-col gap-4\">\r\n <div>\r\n <h1 class=\"text-3xl font-bold tracking-tighter uppercase leading-none\">Mario L\u00f3pez<\/h1>\r\n <p class=\"text-[10px] text-stone-400 uppercase tracking-[0.4em] mt-2 font-semibold\">Departamento de Sistemas<\/p>\r\n <\/div>\r\n \r\n <div class=\"dropdown-status\">\r\n <button id=\"main-status-btn\" class=\"border border-stone-200 px-4 py-2 min-w-[220px] flex items-center justify-between text-[9px] font-bold uppercase tracking-widest hover:border-black transition-all\">\r\n <span class=\"flex items-center\">\r\n <span id=\"current-led\" class=\"led led-online\"><\/span>\r\n <span id=\"current-text\">1. En l\u00ednea<\/span>\r\n <\/span>\r\n <span class=\"ml-4 opacity-30 text-[8px]\">\u25bc<\/span>\r\n <\/button>\r\n <div class=\"dropdown-content\">\r\n <div class=\"option-item\" onclick=\"solicitarCambioEstatus(1, 'En l\u00ednea', 'led-online')\">\r\n <span class=\"led led-online\"><\/span><span class=\"text-[9px] font-bold uppercase tracking-widest\">1. En l\u00ednea<\/span>\r\n <\/div>\r\n <div class=\"option-item\" onclick=\"solicitarCambioEstatus(2, 'Operando en club', 'led-club')\">\r\n <span class=\"led led-club\"><\/span><span class=\"text-[9px] font-bold uppercase tracking-widest\">2. Operando en club<\/span>\r\n <\/div>\r\n <div class=\"option-item\" onclick=\"solicitarCambioEstatus(3, 'Desarrollando', 'led-dev')\">\r\n <span class=\"led led-dev\"><\/span><span class=\"text-[9px] font-bold uppercase tracking-widest\">3. Desarrollando<\/span>\r\n <\/div>\r\n <div class=\"option-item\" onclick=\"solicitarCambioEstatus(4, 'Fuera de l\u00ednea', 'led-offline')\">\r\n <span class=\"led led-offline\"><\/span><span class=\"text-[9px] font-bold uppercase tracking-widest\">4. Fuera de l\u00ednea<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <button onclick=\"accesoProtegido('https:\/\/sporticamx.com\/index.php\/reporte-de-incidencias\/')\" class=\"bg-black text-white px-8 py-4 text-[10px] font-bold uppercase tracking-widest hover:bg-[#d4af37] transition-all shadow-lg\">\r\n + Nuevo Reporte\r\n <\/button>\r\n <\/header>\r\n\r\n <div class=\"mb-10\">\r\n <h3 class=\"text-3xl font-bold tracking-tighter uppercase leading-none\">Reporte de incidencias Operativas<\/h3>\r\n <p class=\"text-[10px] text-stone-400 uppercase tracking-[0.4em] mt-2 font-semibold\">Gesti\u00f3n T\u00e9cnica Sportica Exclusive<\/p>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6 mb-10\">\r\n <div class=\"border border-stone-100 p-6 rounded-sm bg-white shadow-sm\">\r\n <p class=\"text-[9px] text-stone-400 uppercase tracking-[0.3em] font-bold mb-1\">Incidentes Activos<\/p>\r\n <div class=\"flex items-end gap-2\">\r\n <span id=\"kpi-pendientes\" class=\"text-4xl font-bold tracking-tighter text-black\">0<\/span>\r\n <span class=\"text-[10px] text-red-500 font-bold mb-1 uppercase tracking-widest\">Atenci\u00f3n<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"border border-stone-100 p-6 rounded-sm bg-white shadow-sm\">\r\n <p class=\"text-[9px] text-stone-400 uppercase tracking-[0.3em] font-bold mb-1\">Unidad Cr\u00edtica<\/p>\r\n <div class=\"flex items-end gap-2\">\r\n <span id=\"kpi-critico\" class=\"text-2xl font-bold tracking-tighter uppercase text-black\">---<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"border border-stone-100 p-6 rounded-sm bg-white shadow-sm\">\r\n <p class=\"text-[9px] text-stone-400 uppercase tracking-[0.3em] font-bold mb-1\">Total Archivados<\/p>\r\n <div class=\"flex items-end gap-2\">\r\n <span id=\"kpi-archivados\" class=\"text-4xl font-bold tracking-tighter text-stone-300\">0<\/span>\r\n <span class=\"text-[10px] text-stone-400 mb-1 uppercase tracking-widest italic\">Hist\u00f3rico<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"mb-6 relative\">\r\n <input type=\"text\" id=\"buscador\" onkeyup=\"filtrarTabla()\" placeholder=\"BUSCAR POR CLUB, DISPOSITIVO O RESPONSABLE...\" \r\n class=\"w-full border-b-2 border-stone-100 py-4 px-2 text-[11px] font-bold uppercase tracking-widest focus:outline-none focus:border-black transition-colors placeholder-stone-300\">\r\n <span class=\"absolute right-4 top-4 opacity-20\">\ud83d\udd0d<\/span>\r\n <\/div>\r\n\r\n <div class=\"dashboard-container\">\r\n <table class=\"table-prestige\" id=\"tablaMaster\">\r\n <thead>\r\n <tr>\r\n <th style=\"width: 120px;\">Fecha<\/th>\r\n <th style=\"width: 160px;\">Club<\/th>\r\n <th>Dispositivo \/ Seguimiento<\/th>\r\n <th style=\"width: 160px;\">Estatus<\/th>\r\n <th style=\"width: 140px;\">Responsable<\/th>\r\n <th style=\"width: 130px; text-align: center;\">Acciones<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"lista-reportes\">\r\n <tr><td colspan=\"6\" class=\"text-center py-24 text-stone-300 italic text-xs\">Sincronizando...<\/td><\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n \r\n <footer class=\"mt-12 pt-6 border-t border-gray-100 flex justify-between items-center text-[10px] text-stone-400 uppercase tracking-widest\">\r\n <p class=\"italic font-bold text-stone-300\">Sportica Exclusive Prestige<\/p>\r\n <p>\u00a9 2026 Reservado<\/p>\r\n <\/footer>\r\n <\/div>\r\n\r\n <script>\r\n const CLAVE_TECNICA = \"sportica2026\";\r\n\r\n function solicitarCambioEstatus(id, nombre, claseLed) {\r\n const pass = prompt(\"\ud83d\udd10 SEGURIDAD SISTEMAS\\nIngrese la clave para cambiar su estatus:\");\r\n if (pass === CLAVE_TECNICA) {\r\n document.getElementById('current-text').innerText = id + \". \" + nombre;\r\n document.getElementById('current-led').className = \"led \" + claseLed;\r\n } else if (pass !== null) {\r\n alert(\"\u274c Clave incorrecta.\");\r\n }\r\n }\r\n\r\n function accesoProtegido(urlDestino) {\r\n const password = prompt(\"\ud83d\udd11 ZONA PRIVADA SPORTICA\\nIngrese clave t\u00e9cnica:\");\r\n if (password === CLAVE_TECNICA) { window.location.href = urlDestino; }\r\n else if (password !== null) { alert(\"\u274c Clave incorrecta.\"); }\r\n }\r\n\r\n function filtrarTabla() {\r\n const input = document.getElementById(\"buscador\");\r\n const filter = input.value.toUpperCase();\r\n const table = document.getElementById(\"tablaMaster\");\r\n const tr = table.getElementsByTagName(\"tr\");\r\n for (let i = 1; i < tr.length; i++) {\r\n const textoFila = tr[i].textContent || tr[i].innerText;\r\n tr[i].style.display = textoFila.toUpperCase().indexOf(filter) > -1 ? \"\" : \"none\";\r\n }\r\n }\r\n\r\n async function cargarReportes() {\r\n try {\r\n const respuesta = await fetch('\/obtener_reportes.php');\r\n const data = await respuesta.json(); \/\/ Trae { reportes: [], stats: {} }\r\n \r\n \/\/ Actualizar KPIs\r\n document.getElementById('kpi-pendientes').innerText = data.stats.pendientes;\r\n document.getElementById('kpi-archivados').innerText = data.stats.archivados;\r\n document.getElementById('kpi-critico').innerText = data.stats.critico;\r\n\r\n const tablaBody = document.getElementById('lista-reportes');\r\n tablaBody.innerHTML = ''; \r\n const ahora = new Date();\r\n\r\n data.reportes.forEach(reporte => {\r\n const fechaReporte = new Date(reporte.fecha);\r\n const diffHoras = Math.abs(ahora - fechaReporte) \/ 36e5;\r\n const esCritico = (diffHoras > 48 && reporte.estatus.toLowerCase().includes('falla'));\r\n\r\n const fila = `\r\n <tr class=\"transition-colors border-b border-gray-50 ${esCritico ? 'alerta-tiempo' : 'hover:bg-stone-50\/50'}\">\r\n <td class=\"py-8 px-4 text-stone-400 text-xs\">${reporte.fecha}<\/td>\r\n <td class=\"py-8 px-4 font-bold italic text-black text-sm uppercase\">${reporte.club} ${esCritico ? '\u26a0\ufe0f' : ''}<\/td>\r\n <td class=\"py-8 px-4\">\r\n <div class=\"font-bold text-gray-900 text-[13px] mb-2 uppercase tracking-tight\">${reporte.dispositivo}<\/div>\r\n <div class=\"text-[11px] text-stone-500 leading-relaxed bg-stone-50 p-4 border-l-2 border-[#d4af37] italic\">\r\n \ud83d\udccc ${reporte.observaciones || \"Sin observaciones.\"}\r\n <\/div>\r\n <\/td>\r\n <td class=\"py-8 px-4\"><span class=\"status-badge ${getClaseStatus(reporte.estatus)}\">${reporte.estatus}<\/span><\/td>\r\n <td class=\"py-8 px-4 text-stone-500 font-bold text-[10px] uppercase\">${reporte.responsable}<\/td>\r\n <td class=\"py-8 px-4 text-center\">\r\n <button onclick=\"accesoProtegido('\/editar-reporte.php?id=${reporte.id}')\" class=\"btn-edit uppercase tracking-widest\">Gestionar<\/button>\r\n <\/td>\r\n <\/tr>\r\n `;\r\n tablaBody.innerHTML += fila;\r\n });\r\n } catch (e) { \r\n console.log(\"Error al cargar datos:\", e); \r\n }\r\n }\r\n\r\n function getClaseStatus(s) {\r\n const st = s.toLowerCase();\r\n return st.includes('activo') ? 'status-activo' : st.includes('falla') ? 'status-falla' : 'status-revision';\r\n }\r\n\r\n document.addEventListener('DOMContentLoaded', cargarReportes);\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Dashboard T\u00e9cnico | Sportica Prestige Mario L\u00f3pez Departamento de Sistemas 1. En l\u00ednea \u25bc 1. En l\u00ednea 2. Operando en club 3. Desarrollando 4. Fuera de l\u00ednea + Nuevo Reporte Reporte de incidencias Operativas Gesti\u00f3n T\u00e9cnica Sportica Exclusive Incidentes Activos 0 Atenci\u00f3n Unidad Cr\u00edtica — Total Archivados 0 Hist\u00f3rico \ud83d\udd0d Fecha Club Dispositivo \/ Seguimiento […]<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","footnotes":""},"class_list":["post-23577","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/pages\/23577","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/comments?post=23577"}],"version-history":[{"count":46,"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/pages\/23577\/revisions"}],"predecessor-version":[{"id":23674,"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/pages\/23577\/revisions\/23674"}],"wp:attachment":[{"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/media?parent=23577"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n Dashboard T\u00e9cnico | Sportica Prestige<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;600;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n body { font-family: 'Montserrat', sans-serif; background-color: #ffffff; color: #000; }\r\n .dashboard-container { width: 100%; overflow-x: auto; border: 1px solid #eee; border-radius: 4px; }\r\n .table-prestige { width: 100%; border-collapse: collapse; min-width: 1000px; }\r\n .table-prestige th { text-transform: uppercase; font-size: 10px; letter-spacing: 2px; color: #999; border-bottom: 1px solid #eee; padding: 20px 15px; text-align: left; }\r\n \r\n .status-badge { padding: 5px 14px; border-radius: 20px; font-size: 9px; font-weight: 700; text-transform: uppercase; display: inline-block; white-space: nowrap; }\r\n .status-activo { background: #e6fffa; color: #38b2ac; }\r\n .status-falla { background: #fff5f5; color: #e53e3e; }\r\n .status-revision { background: #fffaf0; color: #dd6b20; }\r\n \r\n .btn-edit { color: #d4af37; font-weight: 700; font-size: 11px; transition: all 0.3s; padding: 10px 15px; cursor: pointer; }\r\n .btn-edit:hover { color: #000; background-color: #fcf8eb; }\r\n\r\n \/* --- ESTILOS DROPDOWN ESTATUS --- *\/\r\n .dropdown-status { position: relative; display: inline-block; padding-bottom: 10px; margin-bottom: -10px; }\r\n .dropdown-status:hover .dropdown-content { display: block; }\r\n .dropdown-content { \r\n display: none; \r\n position: absolute; \r\n background-color: white; \r\n min-width: 220px; \r\n box-shadow: 0px 8px 16px rgba(0,0,0,0.1); \r\n z-index: 50; \r\n border: 1px solid #eee; \r\n margin-top: 2px; \r\n }\r\n .dropdown-content::before {\r\n content: \"\";\r\n position: absolute;\r\n top: -15px;\r\n left: 0;\r\n width: 100%;\r\n height: 15px;\r\n background: transparent;\r\n }\r\n .option-item { padding: 12px 16px; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; }\r\n .option-item:hover { background-color: #fcf8eb; }\r\n \r\n .led { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 10px; }\r\n .led-online { background-color: #2ecc71; box-shadow: 0 0 8px #2ecc71; }\r\n .led-club { background-color: #3498db; box-shadow: 0 0 8px #3498db; }\r\n .led-dev { background-color: #9b59b6; box-shadow: 0 0 8px #9b59b6; }\r\n .led-offline { background-color: #e74c3c; box-shadow: 0 0 8px #e74c3c; }\r\n\r\n @keyframes alertaPulso {\r\n 0% { background-color: #fff; }\r\n 50% { background-color: #fff5f5; }\r\n 100% { background-color: #fff; }\r\n }\r\n .alerta-tiempo { animation: alertaPulso 2s infinite; border-left: 4px solid #e53e3e !important; }\r\n <\/style>\r\n<\/head>\r\n<body class=\"p-4 md:p-10\">\r\n\r\n <div class=\"max-w-7xl mx-auto\">\r\n <header class=\"flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-6\">\r\n <div class=\"flex flex-col gap-4\">\r\n <div>\r\n <h1 class=\"text-3xl font-bold tracking-tighter uppercase leading-none\">Mario L\u00f3pez<\/h1>\r\n <p class=\"text-[10px] text-stone-400 uppercase tracking-[0.4em] mt-2 font-semibold\">Departamento de Sistemas<\/p>\r\n <\/div>\r\n \r\n <div class=\"dropdown-status\">\r\n <button id=\"main-status-btn\" class=\"border border-stone-200 px-4 py-2 min-w-[220px] flex items-center justify-between text-[9px] font-bold uppercase tracking-widest hover:border-black transition-all\">\r\n <span class=\"flex items-center\">\r\n <span id=\"current-led\" class=\"led led-online\"><\/span>\r\n <span id=\"current-text\">1. En l\u00ednea<\/span>\r\n <\/span>\r\n <span class=\"ml-4 opacity-30 text-[8px]\">\u25bc<\/span>\r\n <\/button>\r\n <div class=\"dropdown-content\">\r\n <div class=\"option-item\" onclick=\"solicitarCambioEstatus(1, 'En l\u00ednea', 'led-online')\">\r\n <span class=\"led led-online\"><\/span><span class=\"text-[9px] font-bold uppercase tracking-widest\">1. En l\u00ednea<\/span>\r\n <\/div>\r\n <div class=\"option-item\" onclick=\"solicitarCambioEstatus(2, 'Operando en club', 'led-club')\">\r\n <span class=\"led led-club\"><\/span><span class=\"text-[9px] font-bold uppercase tracking-widest\">2. Operando en club<\/span>\r\n <\/div>\r\n <div class=\"option-item\" onclick=\"solicitarCambioEstatus(3, 'Desarrollando', 'led-dev')\">\r\n <span class=\"led led-dev\"><\/span><span class=\"text-[9px] font-bold uppercase tracking-widest\">3. Desarrollando<\/span>\r\n <\/div>\r\n <div class=\"option-item\" onclick=\"solicitarCambioEstatus(4, 'Fuera de l\u00ednea', 'led-offline')\">\r\n <span class=\"led led-offline\"><\/span><span class=\"text-[9px] font-bold uppercase tracking-widest\">4. Fuera de l\u00ednea<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <button onclick=\"accesoProtegido('https:\/\/sporticamx.com\/index.php\/reporte-de-incidencias\/')\" class=\"bg-black text-white px-8 py-4 text-[10px] font-bold uppercase tracking-widest hover:bg-[#d4af37] transition-all shadow-lg\">\r\n + Nuevo Reporte\r\n <\/button>\r\n <\/header>\r\n\r\n <div class=\"mb-10\">\r\n <h3 class=\"text-3xl font-bold tracking-tighter uppercase leading-none\">Reporte de incidencias Operativas<\/h3>\r\n <p class=\"text-[10px] text-stone-400 uppercase tracking-[0.4em] mt-2 font-semibold\">Gesti\u00f3n T\u00e9cnica Sportica Exclusive<\/p>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6 mb-10\">\r\n <div class=\"border border-stone-100 p-6 rounded-sm bg-white shadow-sm\">\r\n <p class=\"text-[9px] text-stone-400 uppercase tracking-[0.3em] font-bold mb-1\">Incidentes Activos<\/p>\r\n <div class=\"flex items-end gap-2\">\r\n <span id=\"kpi-pendientes\" class=\"text-4xl font-bold tracking-tighter text-black\">0<\/span>\r\n <span class=\"text-[10px] text-red-500 font-bold mb-1 uppercase tracking-widest\">Atenci\u00f3n<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"border border-stone-100 p-6 rounded-sm bg-white shadow-sm\">\r\n <p class=\"text-[9px] text-stone-400 uppercase tracking-[0.3em] font-bold mb-1\">Unidad Cr\u00edtica<\/p>\r\n <div class=\"flex items-end gap-2\">\r\n <span id=\"kpi-critico\" class=\"text-2xl font-bold tracking-tighter uppercase text-black\">---<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"border border-stone-100 p-6 rounded-sm bg-white shadow-sm\">\r\n <p class=\"text-[9px] text-stone-400 uppercase tracking-[0.3em] font-bold mb-1\">Total Archivados<\/p>\r\n <div class=\"flex items-end gap-2\">\r\n <span id=\"kpi-archivados\" class=\"text-4xl font-bold tracking-tighter text-stone-300\">0<\/span>\r\n <span class=\"text-[10px] text-stone-400 mb-1 uppercase tracking-widest italic\">Hist\u00f3rico<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"mb-6 relative\">\r\n <input type=\"text\" id=\"buscador\" onkeyup=\"filtrarTabla()\" placeholder=\"BUSCAR POR CLUB, DISPOSITIVO O RESPONSABLE...\" \r\n class=\"w-full border-b-2 border-stone-100 py-4 px-2 text-[11px] font-bold uppercase tracking-widest focus:outline-none focus:border-black transition-colors placeholder-stone-300\">\r\n <span class=\"absolute right-4 top-4 opacity-20\">\ud83d\udd0d<\/span>\r\n <\/div>\r\n\r\n <div class=\"dashboard-container\">\r\n <table class=\"table-prestige\" id=\"tablaMaster\">\r\n <thead>\r\n <tr>\r\n <th style=\"width: 120px;\">Fecha<\/th>\r\n <th style=\"width: 160px;\">Club<\/th>\r\n <th>Dispositivo \/ Seguimiento<\/th>\r\n <th style=\"width: 160px;\">Estatus<\/th>\r\n <th style=\"width: 140px;\">Responsable<\/th>\r\n <th style=\"width: 130px; text-align: center;\">Acciones<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"lista-reportes\">\r\n <tr><td colspan=\"6\" class=\"text-center py-24 text-stone-300 italic text-xs\">Sincronizando...<\/td><\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n \r\n <footer class=\"mt-12 pt-6 border-t border-gray-100 flex justify-between items-center text-[10px] text-stone-400 uppercase tracking-widest\">\r\n <p class=\"italic font-bold text-stone-300\">Sportica Exclusive Prestige<\/p>\r\n <p>\u00a9 2026 Reservado<\/p>\r\n <\/footer>\r\n <\/div>\r\n\r\n <script>\r\n const CLAVE_TECNICA = \"sportica2026\";\r\n\r\n function solicitarCambioEstatus(id, nombre, claseLed) {\r\n const pass = prompt(\"\ud83d\udd10 SEGURIDAD SISTEMAS\\nIngrese la clave para cambiar su estatus:\");\r\n if (pass === CLAVE_TECNICA) {\r\n document.getElementById('current-text').innerText = id + \". \" + nombre;\r\n document.getElementById('current-led').className = \"led \" + claseLed;\r\n } else if (pass !== null) {\r\n alert(\"\u274c Clave incorrecta.\");\r\n }\r\n }\r\n\r\n function accesoProtegido(urlDestino) {\r\n const password = prompt(\"\ud83d\udd11 ZONA PRIVADA SPORTICA\\nIngrese clave t\u00e9cnica:\");\r\n if (password === CLAVE_TECNICA) { window.location.href = urlDestino; }\r\n else if (password !== null) { alert(\"\u274c Clave incorrecta.\"); }\r\n }\r\n\r\n function filtrarTabla() {\r\n const input = document.getElementById(\"buscador\");\r\n const filter = input.value.toUpperCase();\r\n const table = document.getElementById(\"tablaMaster\");\r\n const tr = table.getElementsByTagName(\"tr\");\r\n for (let i = 1; i < tr.length; i++) {\r\n const textoFila = tr[i].textContent || tr[i].innerText;\r\n tr[i].style.display = textoFila.toUpperCase().indexOf(filter) > -1 ? \"\" : \"none\";\r\n }\r\n }\r\n\r\n async function cargarReportes() {\r\n try {\r\n const respuesta = await fetch('\/obtener_reportes.php');\r\n const data = await respuesta.json(); \/\/ Trae { reportes: [], stats: {} }\r\n \r\n \/\/ Actualizar KPIs\r\n document.getElementById('kpi-pendientes').innerText = data.stats.pendientes;\r\n document.getElementById('kpi-archivados').innerText = data.stats.archivados;\r\n document.getElementById('kpi-critico').innerText = data.stats.critico;\r\n\r\n const tablaBody = document.getElementById('lista-reportes');\r\n tablaBody.innerHTML = ''; \r\n const ahora = new Date();\r\n\r\n data.reportes.forEach(reporte => {\r\n const fechaReporte = new Date(reporte.fecha);\r\n const diffHoras = Math.abs(ahora - fechaReporte) \/ 36e5;\r\n const esCritico = (diffHoras > 48 && reporte.estatus.toLowerCase().includes('falla'));\r\n\r\n const fila = `\r\n <tr class=\"transition-colors border-b border-gray-50 ${esCritico ? 'alerta-tiempo' : 'hover:bg-stone-50\/50'}\">\r\n <td class=\"py-8 px-4 text-stone-400 text-xs\">${reporte.fecha}<\/td>\r\n <td class=\"py-8 px-4 font-bold italic text-black text-sm uppercase\">${reporte.club} ${esCritico ? '\u26a0\ufe0f' : ''}<\/td>\r\n <td class=\"py-8 px-4\">\r\n <div class=\"font-bold text-gray-900 text-[13px] mb-2 uppercase tracking-tight\">${reporte.dispositivo}<\/div>\r\n <div class=\"text-[11px] text-stone-500 leading-relaxed bg-stone-50 p-4 border-l-2 border-[#d4af37] italic\">\r\n \ud83d\udccc ${reporte.observaciones || \"Sin observaciones.\"}\r\n <\/div>\r\n <\/td>\r\n <td class=\"py-8 px-4\"><span class=\"status-badge ${getClaseStatus(reporte.estatus)}\">${reporte.estatus}<\/span><\/td>\r\n <td class=\"py-8 px-4 text-stone-500 font-bold text-[10px] uppercase\">${reporte.responsable}<\/td>\r\n <td class=\"py-8 px-4 text-center\">\r\n <button onclick=\"accesoProtegido('\/editar-reporte.php?id=${reporte.id}')\" class=\"btn-edit uppercase tracking-widest\">Gestionar<\/button>\r\n <\/td>\r\n <\/tr>\r\n `;\r\n tablaBody.innerHTML += fila;\r\n });\r\n } catch (e) { \r\n console.log(\"Error al cargar datos:\", e); \r\n }\r\n }\r\n\r\n function getClaseStatus(s) {\r\n const st = s.toLowerCase();\r\n return st.includes('activo') ? 'status-activo' : st.includes('falla') ? 'status-falla' : 'status-revision';\r\n }\r\n\r\n document.addEventListener('DOMContentLoaded', cargarReportes);\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Dashboard T\u00e9cnico | Sportica Prestige Mario L\u00f3pez Departamento de Sistemas 1. En l\u00ednea \u25bc 1. En l\u00ednea 2. Operando en club 3. Desarrollando 4. Fuera de l\u00ednea + Nuevo Reporte Reporte de incidencias Operativas Gesti\u00f3n T\u00e9cnica Sportica Exclusive Incidentes Activos 0 Atenci\u00f3n Unidad Cr\u00edtica — Total Archivados 0 Hist\u00f3rico \ud83d\udd0d Fecha Club Dispositivo \/ Seguimiento […]<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","footnotes":""},"class_list":["post-23577","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/pages\/23577","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/comments?post=23577"}],"version-history":[{"count":46,"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/pages\/23577\/revisions"}],"predecessor-version":[{"id":23674,"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/pages\/23577\/revisions\/23674"}],"wp:attachment":[{"href":"https:\/\/sporticamx.com\/index.php\/wp-json\/wp\/v2\/media?parent=23577"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}