L40/DMCProject_RS1
0
1<html lang="es">2<head>3 <meta charset="UTF-8">4 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">5 <title>DMC PROJECT | Raquel Segado</title>6 <meta name="apple-mobile-web-app-capable" content="yes">7 <meta name="theme-color" content="#10b981">8 <style>9 :root {10 /* Paleta de Colores (INTACTA) */11 --primary: #10b981; /* Esmeralda */12 --primary-dark: #059669;13 --secondary: #d4af37; /* Dorado */14 --bg-body: #f1f5f9; /* Slate Light */15 --bg-card: #ffffff;16 --text-main: #1e293b; /* Slate Dark */17 --text-muted: #64748b;18 --error: #ef4444;19 20 /* Nuevos colores para el Banner de Prioridad */21 --warning-bg: #fffbeb;22 --warning-border: #f59e0b;23 --warning-text: #92400e;24 25 /* Tipografía */26 --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;27 28 /* Espaciado y Radios */29 --radius-md: 12px;30 --radius-lg: 20px;31 --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);32 --header-height: 70px;33 --nav-height: 80px;34 }35 36 * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }37 38 body {39 font-family: var(--font-stack);40 background-color: var(--bg-body);41 color: var(--text-main);42 margin: 0;43 padding: 0;44 height: 100vh;45 overflow: hidden; 46 }47 48 /* --- UTILIDADES --- */49 .hidden { display: none !important; }50 .fade-in { animation: fadeIn 0.4s ease-in; }51 @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }52 53 /* --- LOGIN SCREEN --- */54 #login-screen {55 position: fixed;56 top: 0; left: 0; width: 100%; height: 100%;57 background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);58 display: flex;59 flex-direction: column;60 justify-content: center;61 align-items: center;62 z-index: 1000;63 padding: 2rem;64 text-align: center;65 }66 67 .brand-title { color: white; font-size: 2rem; font-weight: 800; letter-spacing: -1px; margin-bottom: 0.5rem; }68 .brand-title span { color: var(--primary); }69 .brand-subtitle { color: var(--secondary); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 3rem; }70 71 .login-form { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 1rem; }72 73 .input-group input {74 width: 100%; padding: 16px; border-radius: var(--radius-md);75 border: 1px solid #334155; background: #334155; color: white;76 font-size: 1rem; outline: none; transition: all 0.3s;77 }78 .input-group input:focus { border-color: var(--primary); background: #475569; }79 80 .btn-login {81 background: var(--primary); color: white; border: none; padding: 16px;82 border-radius: var(--radius-md); font-size: 1rem; font-weight: 600;83 cursor: pointer; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);84 }85 .error-msg { color: var(--error); font-size: 0.9rem; min-height: 20px; margin-top: 10px; }86 87 /* --- APP LAYOUT --- */88 #app-container { display: flex; flex-direction: column; height: 100%; }89 90 /* HEADER */91 .app-header {92 height: var(--header-height);93 background: linear-gradient(to right, var(--primary), #0d9488);94 color: white;95 padding: 0 20px;96 display: flex; align-items: center; justify-content: space-between;97 box-shadow: var(--shadow); flex-shrink: 0; z-index: 50;98 }99 .header-left h1 { margin: 0; font-size: 1.2rem; font-weight: 700; }100 .header-left p { margin: 0; font-size: 0.75rem; opacity: 0.9; }101 .user-badge { 102 background: var(--secondary); color: #1e293b; 103 padding: 4px 10px; border-radius: 20px; 104 font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;105 }106 107 /* MAIN CONTENT */108 .content-area {109 flex: 1; overflow-y: auto; padding: 20px 20px 100px 20px;110 scroll-behavior: smooth;111 }112 113 /* CARD STYLES */114 .section-title {115 color: var(--text-main); font-size: 1.1rem; font-weight: 700;116 margin: 25px 0 15px 0; display: flex; align-items: center; gap: 10px;117 }118 .section-title::before { content: ''; width: 4px; height: 18px; background: var(--secondary); border-radius: 2px; display: block; }119 120 .card {121 background: var(--bg-card); border-radius: var(--radius-md);122 padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow);123 border: 1px solid transparent; position: relative;124 }125 126 .card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }127 .exercise-name { font-weight: 700; font-size: 1rem; color: var(--text-main); margin: 0; flex: 1; padding-right: 10px; }128 129 /* DATA TAGS */130 .tags { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }131 .tag { padding: 4px 8px; border-radius: 6px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; }132 .tag-rpe { background: #fef3c7; color: #d97706; }133 .tag-tempo { background: #e0f2fe; color: #0284c7; }134 .tag-sets { background: #e2e8f0; color: #475569; }135 .tag-alert { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }136 137 .exercise-detail { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 15px; }138 .bio-note { 139 background: #f8fafc; border-left: 3px solid var(--secondary); 140 padding: 8px 12px; font-size: 0.8rem; color: #475569; 141 margin-bottom: 15px; font-style: italic;142 }143 .bio-note.correction {144 border-left-color: #ef4444; background: #fff1f2; color: #991b1b; font-weight: 600; font-style: normal;145 }146 147 /* --- ESTILOS DEL BANNER DE PRIORIDAD (NUEVO) --- */148 .priority-banner {149 background: var(--warning-bg);150 border-left: 4px solid var(--warning-border);151 padding: 15px;152 margin-bottom: 25px;153 border-radius: 8px;154 box-shadow: 0 2px 5px rgba(0,0,0,0.05);155 display: flex;156 flex-direction: column;157 gap: 8px;158 animation: fadeIn 0.5s ease-out;159 }160 .priority-header {161 display: flex; align-items: center; gap: 8px;162 color: var(--warning-text);163 font-weight: 800;164 font-size: 0.85rem;165 text-transform: uppercase;166 letter-spacing: 0.5px;167 }168 .priority-text {169 color: #78350f;170 font-size: 0.85rem;171 line-height: 1.5;172 }173 .priority-text strong {174 color: #92400e;175 }176 177 /* SERIES CHECKBOXES */178 .sets-wrapper {179 display: flex; align-items: center; gap: 10px;180 margin-top: 15px; padding-top: 15px; border-top: 1px solid #f1f5f9;181 }182 .sets-label { font-size: 0.75rem; color: #94a3b8; font-weight: 600; text-transform: uppercase; }183 .set-bubbles { display: flex; gap: 8px; }184 .set-bubble {185 width: 32px; height: 32px; border-radius: 50%;186 border: 2px solid #cbd5e1;187 display: flex; align-items: center; justify-content: center;188 font-size: 0.8rem; color: #94a3b8; font-weight: 600;189 cursor: pointer; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);190 }191 .set-bubble.completed {192 background: var(--primary); border-color: var(--primary);193 color: white; transform: scale(1.1);194 }195 196 /* TIMER & ACTIONS */197 .actions-bar {198 display: flex; justify-content: space-between; align-items: center;199 margin-top: 15px;200 }201 202 .video-btn {203 display: inline-flex; align-items: center; gap: 6px;204 background: white; border: 1px solid #cbd5e1; color: var(--text-main);205 padding: 8px 14px; border-radius: 8px; font-size: 0.8rem;206 text-decoration: none; font-weight: 600;207 }208 209 .timer-btn {210 background: #f8fafc; border: 1px solid #cbd5e1; color: var(--text-main);211 padding: 8px 14px; border-radius: 8px; font-size: 0.8rem; font-weight: 600;212 cursor: pointer; display: flex; align-items: center; gap: 6px;213 transition: all 0.2s;214 }215 .timer-btn.active { background: #fef2f2; border-color: #ef4444; color: #ef4444; }216 217 .timer-display {218 display: none; width: 100%; text-align: center;219 background: #1e293b; color: white; padding: 10px;220 border-radius: 8px; margin-top: 10px; font-weight: 700; font-size: 1.2rem;221 }222 223 /* TAB BAR */224 .bottom-nav {225 position: fixed; bottom: 0; left: 0; width: 100%; height: var(--nav-height);226 background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px);227 border-top: 1px solid #e2e8f0; display: flex; justify-content: space-around;228 align-items: center; z-index: 100; padding-bottom: 10px;229 }230 231 .nav-item {232 display: flex; flex-direction: column; align-items: center; justify-content: center;233 gap: 5px; color: #94a3b8; font-size: 0.7rem; background: none; border: none;234 cursor: pointer; width: 20%;235 }236 .nav-item.active { color: var(--primary); font-weight: 600; }237 .nav-item.active svg { stroke: var(--primary); transform: translateY(-3px); }238 .nav-item svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: all 0.2s; }239 240 /* DATA TAB SPECIFIC STYLES */241 .data-card { background: white; padding: 20px; border-radius: var(--radius-md); margin-bottom: 20px; border-left: 4px solid var(--primary); box-shadow: var(--shadow); }242 .data-title { margin: 0 0 10px 0; color: var(--primary-dark); font-size: 1.1rem; display: flex; align-items: center; gap:8px; }243 .data-text { font-size: 0.9rem; color: #475569; line-height: 1.6; }244 .data-subtitle { color: var(--text-main); font-weight: 700; margin-top: 10px; display: block; }245 246 </style>247</head>248<body>249 250 <div id="login-screen">251 <div class="brand-title">DMC <span>PROJECT</span></div>252 <div class="brand-subtitle">Fitness Project Movement 2026</div>253 254 <form class="login-form" id="loginForm">255 <div class="input-group">256 <input type="text" id="username" placeholder="Usuario" required>257 </div>258 <div class="input-group">259 <input type="password" id="password" placeholder="Contraseña" required>260 </div>261 <button type="submit" class="btn-login">Entrar</button>262 <div class="error-msg" id="loginError"></div>263 </form>264 </div>265 266 <div id="app-container" class="hidden">267 <header class="app-header">268 <div class="header-left">269 <h1 id="page-title">Bienvenida</h1>270 <p>Mesociclo 1: Estabilidad Estructural</p>271 </div>272 <div class="user-badge">ATLETA RAQUEL SEGADO</div>273 </header>274 275 <main id="content-area" class="content-area"></main>276 277 <nav class="bottom-nav">278 <button class="nav-item active" onclick="renderTab('day1')">279 <svg viewBox="0 0 24 24"><path d="M6 4h12M6 20h12M4 12h16M4 12v6a2 2 0 002 2M20 12v6a2 2 0 01-2 2"/></svg>280 <span>Día 1</span>281 </button>282 <button class="nav-item" onclick="renderTab('day2')">283 <svg viewBox="0 0 24 24"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>284 <span>Día 2</span>285 </button>286 <button class="nav-item" onclick="renderTab('day3')">287 <svg viewBox="0 0 24 24"><path d="M6.5 6.5h11M6.5 17.5h11M6 12h12M2 12l2-2m16 4l2-2M4 12l-2-2m18 4l-2-2"/></svg>288 <span>Día 3</span>289 </button>290 <button class="nav-item" onclick="renderTab('day4')">291 <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18M15 3v18M3 9h18M3 15h18"/></svg>292 <span>Día 4</span>293 </button>294 <button class="nav-item" onclick="renderTab('data')">295 <svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>296 <span>DATA</span>297 </button>298 </nav>299 </div>300 301 <script>302 // --- 1. DATOS DEL PROGRAMA PERSONALIZADOS PARA RAQUEL SEGADO ---303 const programData = {304 activation: [305 { name: "Movilidad Torácica", note: "Libro abierto o Rotaciones. Vital para el asma.", sets: "2x10/lado" },306 { name: "Glute Bridge Iso", note: "Aguanta 30 seg arriba. Despierta glúteo antes de cuádriceps.", sets: "2x30s" },307 { name: "Dead Bug", note: "Espalda pegada al suelo. Control escoliosis.", sets: "2x10 total" },308 { name: "Dorsiflexión Tobillo", note: "Rodilla a pared sin levantar talón.", sets: "1x12/lado" }309 ],310 days: {311 day1: {312 title: "Día 1: Tren Inferior",313 subtitle: "Foco: Glúteo & Protección Rodilla",314 exercises: [315 {316 id: "d1_e1",317 name: "Puente Glúteo (Mancuerna)",318 details: "Mancuerna en cadera. Empuja con talones. Pausa 2s arriba.",319 bio: "Máximo estímulo glúteo SIN carga axial en columna (escoliosis friendly).",320 setsLabel: "3 x 12-15", setsCount: 3, restTime: 90,321 rpe: "8", tempo: "2-0-2",322 video: "https://www.youtube.com/results?search_query=glute+bridge+dumbbell"323 },324 {325 id: "d1_e2",326 name: "Peso Muerto Rumano (Mancuernas)",327 details: "Baja las pesas rozando piernas. Cadera atrás (bisagra).",328 bio: "Aprovecha tus brazos largos. Fortalece la cadena posterior para quitar carga a la rodilla.",329 setsLabel: "3 x 10-12", setsCount: 3, restTime: 120,330 rpe: "8", tempo: "3-1-1",331 video: "https://www.youtube.com/results?search_query=dumbbell+rdl+form"332 },333 {334 id: "d1_e3",335 name: "Goblet Squat (Talones Elevados)",336 details: "Usa discos bajo talones. Tronco muy vertical. No abras codos.",337 bio: "CORRECCIÓN: La elevación de talón es obligatoria para tu fémur largo y condromalacia.",338 isCorrection: true,339 setsLabel: "3 x 10", setsCount: 3, restTime: 90,340 rpe: "7.5", tempo: "3-1-1",341 video: "https://www.youtube.com/results?search_query=goblet+squat+heels+elevated"342 },343 {344 id: "d1_e4",345 name: "Abducción Sentada (Banda)",346 details: "Banda sobre rodillas. Espalda recta, inclínate un poco adelante.",347 bio: "Glúteo medio = Estabilidad pélvica para corregir la cadera desigual.",348 setsLabel: "3 x 20", setsCount: 3, restTime: 60,349 rpe: "9", tempo: "1-0-1",350 video: "https://www.youtube.com/results?search_query=seated+band+abduction"351 }352 ]353 },354 day2: {355 title: "Día 2: Tren Superior",356 subtitle: "Foco: Postura & Core Anti-Rotación",357 exercises: [358 {359 id: "d2_e1",360 name: "Remo Unilateral (Apoyo banco)",361 details: "Espalda plana. Tira del codo hacia la cadera, no hacia el techo.",362 bio: "El trabajo unilateral es vital para igualar la fuerza debido a tu escoliosis.",363 setsLabel: "3 x 10-12/lado", setsCount: 3, restTime: 90,364 rpe: "8", tempo: "3-0-1",365 video: "https://www.youtube.com/results?search_query=one+arm+dumbbell+row"366 },367 {368 id: "d2_e2",369 name: "Press Hombro Neutro (Sentada)",370 details: "Palmas se miran. No choques las mancuernas arriba.",371 bio: "Agarre neutro protege el manguito. Evita barra tras nuca por tus palancas.",372 setsLabel: "3 x 10-12", setsCount: 3, restTime: 90,373 rpe: "8", tempo: "3-1-1",374 video: "https://www.youtube.com/results?search_query=neutral+grip+shoulder+press+seated"375 },376 {377 id: "d2_e3",378 name: "Jalón al Pecho",379 details: "Lleva la barra a la clavícula, saca pecho al bajar.",380 bio: "Fortalecer dorsal ancho mejora la silueta 'X' que buscas.",381 setsLabel: "3 x 12", setsCount: 3, restTime: 90,382 rpe: "8", tempo: "3-0-1",383 video: "https://www.youtube.com/results?search_query=lat+pulldown+form"384 },385 {386 id: "d2_e4",387 name: "Press Pallof (Goma/Polea)",388 details: "Rodillas semiflexionadas. Aleja y acerca las manos al pecho sin girar.",389 bio: "EJERCICIO CLAVE: Anti-rotación para frenar la escoliosis.",390 isCorrection: true,391 setsLabel: "3 x 30s/lado", setsCount: 3, restTime: 60,392 rpe: "N/A", tempo: "Lento",393 video: "https://www.youtube.com/results?search_query=pallof+press"394 }395 ]396 },397 day3: {398 title: "Día 3: Full Body Corrector",399 subtitle: "Foco: Unilateral & Estabilidad",400 exercises: [401 {402 id: "d3_e1",403 name: "Sentadilla Búlgara",404 details: "Apóyate en pared si falta equilibrio. Foco pierna delantera.",405 bio: "Desafío alto pero necesario. Estira la cadera de la pierna trasera (bueno tras estar sentada).",406 setsLabel: "2 x 8-10/lado", setsCount: 2, restTime: 120,407 rpe: "9", tempo: "2-1-1",408 video: "https://www.youtube.com/results?search_query=bulgarian+split+squat+dumbbell"409 },410 {411 id: "d3_e2",412 name: "Push Ups (Manos Elevadas)",413 details: "Usa un banco o barra multipower. Cuerpo en tabla.",414 bio: "Tus brazos largos hacen que las flexiones al suelo sean muy duras. Elevar facilita la técnica.",415 setsLabel: "3 x Fallo Téc.", setsCount: 3, restTime: 90,416 rpe: "10", tempo: "Fluido",417 video: "https://www.youtube.com/results?search_query=incline+push+ups"418 },419 {420 id: "d3_e3",421 name: "Face Pull",422 details: "Cuerda a la frente, pulgares atrás. Codos arriba.",423 bio: "Corrector postural nº1 para hombros y espalda alta.",424 setsLabel: "3 x 15", setsCount: 3, restTime: 60,425 rpe: "8", tempo: "2-1-2",426 video: "https://www.youtube.com/results?search_query=face+pull"427 },428 {429 id: "d3_e4",430 name: "Plancha Lateral",431 details: "Codo bajo hombro. Sube cadera.",432 bio: "Refuerzo del cuadrado lumbar (lado convexo de la escoliosis).",433 setsLabel: "3 x 20-30s/lado", setsCount: 3, restTime: 45,434 rpe: "8", tempo: "Iso",435 video: "https://www.youtube.com/results?search_query=side+plank"436 }437 ]438 },439 day4: {440 title: "Día 4: Comp. & Metabólico",441 subtitle: "Puede hacerse antes de clase o en casa",442 exercises: [443 {444 id: "d4_e1",445 name: "Monster Walk (Banda)",446 details: "Pasos laterales con banda en tobillos. Rodillas siempre hacia afuera.",447 bio: "Pre-activación glútea ideal antes de tus clases dirigidas.",448 setsLabel: "3 x 15 pasos/lado", setsCount: 3, restTime: 45,449 rpe: "7", tempo: "Lento",450 video: "https://www.youtube.com/results?search_query=monster+walks"451 },452 {453 id: "d4_e2",454 name: "Bird Dog",455 details: "Cuadrupedia. Estira brazo y pierna contraria sin arquear lumbar.",456 bio: "Control motor de la columna vertebral.",457 setsLabel: "3 x 10/lado", setsCount: 3, restTime: 60,458 rpe: "6", tempo: "2s pausa",459 video: "https://www.youtube.com/results?search_query=bird+dog+exercise"460 },461 {462 id: "d4_e3",463 name: "Trabajo Metabólico (Opcional)",464 details: "Si no tienes clase hoy: 20 min Bici o Elíptica.",465 bio: "Cardio sin impacto para proteger la rodilla (Condromalacia).",466 setsLabel: "1 x 20 min", setsCount: 1, restTime: 0,467 rpe: "6", tempo: "Constante",468 video: ""469 }470 ]471 }472 }473 };474 475 // --- 2. LÓGICA DE LOGIN ---476 const loginForm = document.getElementById('loginForm');477 const loginScreen = document.getElementById('login-screen');478 const appContainer = document.getElementById('app-container');479 const loginError = document.getElementById('loginError');480 481 if (sessionStorage.getItem('dmc_logged_in_raquel') === 'true') {482 loginScreen.classList.add('hidden');483 appContainer.classList.remove('hidden');484 renderTab('day1');485 }486 487 loginForm.addEventListener('submit', (e) => {488 e.preventDefault();489 const u = document.getElementById('username').value.trim();490 const p = document.getElementById('password').value.trim();491 492 if (u === 'rsegado' && p === 'segado2026') {493 sessionStorage.setItem('dmc_logged_in_raquel', 'true');494 loginScreen.style.opacity = '0';495 setTimeout(() => {496 loginScreen.classList.add('hidden');497 appContainer.classList.remove('hidden');498 appContainer.classList.add('fade-in');499 renderTab('day1');500 }, 400);501 } else {502 loginError.textContent = "Credenciales incorrectas";503 setTimeout(() => loginError.textContent = "", 2000);504 }505 });506 507 // --- 3. LÓGICA DE RENDERIZADO Y ESTADO ---508 const contentArea = document.getElementById('content-area');509 const pageTitle = document.getElementById('page-title');510 const navItems = document.querySelectorAll('.nav-item');511 let activeInterval = null; 512 513 function getSetState(exId, setIdx) {514 return localStorage.getItem(`dmc_${exId}_s${setIdx}`) === 'true';515 }516 517 function toggleSet(exId, setIdx, bubbleElement) {518 const currentState = getSetState(exId, setIdx);519 const newState = !currentState;520 localStorage.setItem(`dmc_${exId}_s${setIdx}`, newState);521 522 if (newState) {523 bubbleElement.classList.add('completed');524 } else {525 bubbleElement.classList.remove('completed');526 }527 }528 529 // --- TEMPORIZADOR ---530 function startTimer(seconds, displayId, btnId) {531 if (activeInterval) clearInterval(activeInterval);532 533 const display = document.getElementById(displayId);534 const btn = document.getElementById(btnId);535 536 if (display.style.display === 'block') {537 display.style.display = 'none';538 btn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg> Descanso (${seconds}s)`;539 btn.classList.remove('active');540 return;541 }542 543 display.style.display = 'block';544 btn.classList.add('active');545 let remaining = seconds;546 547 display.textContent = formatTime(remaining);548 549 activeInterval = setInterval(() => {550 remaining--;551 display.textContent = formatTime(remaining);552 if (remaining <= 0) {553 clearInterval(activeInterval);554 display.textContent = "¡LISTO! 🔥";555 btn.classList.remove('active');556 if(navigator.vibrate) navigator.vibrate([200, 100, 200]);557 }558 }, 1000);559 }560 561 function formatTime(sec) {562 const m = Math.floor(sec / 60);563 const s = sec % 60;564 return `${m}:${s < 10 ? '0' : ''}${s}`;565 }566 567 // --- RENDERIZADO ---568 window.renderTab = function(tabName) {569 navItems.forEach(item => item.classList.remove('active'));570 const activeBtn = document.querySelector(`button[onclick="renderTab('${tabName}')"]`);571 if(activeBtn) activeBtn.classList.add('active');572 573 contentArea.innerHTML = "";574 contentArea.scrollTop = 0;575 if(activeInterval) clearInterval(activeInterval);576 577 if (tabName === 'data') {578 renderDataTab();579 pageTitle.textContent = "Expediente Clínico";580 return;581 }582 583 const dayData = programData.days[tabName];584 pageTitle.textContent = dayData.title;585 586 const headerDiv = document.createElement('div');587 headerDiv.style.marginBottom = '20px';588 headerDiv.innerHTML = `<p style="color:#64748b; margin-top:5px">${dayData.subtitle}</p>`;589 contentArea.appendChild(headerDiv);590 591 // --- AQUÍ ESTÁ EL CAMBIO VISUAL (Banner de Regla de Oro) ---592 if (['day1', 'day2', 'day3'].includes(tabName)) {593 const priorityBanner = document.createElement('div');594 priorityBanner.className = 'priority-banner';595 priorityBanner.innerHTML = `596 <div class="priority-header">597 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2"><path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>598 REGLA DE ORO599 </div>600 <div class="priority-text">601 Disponibilidad: <strong>Lunes, Martes, Jueves y Viernes.</strong><br>602 Integraremos tus clases, pero con un matiz: <strong>El entrenamiento de fuerza va primero.</strong><br>603 Si haces Bodypump el mismo día que pesas, estás haciendo "junk volume" (volumen basura).604 </div>605 `;606 contentArea.appendChild(priorityBanner);607 }608 609 // Activación610 if (tabName !== 'day4') { // Day 4 is shorter611 const actTitle = document.createElement('div');612 actTitle.className = 'section-title';613 actTitle.innerHTML = "Ritual de Inicio <span style='font-size:0.7rem; background:#d4af37; color:#fff; padding:2px 6px; border-radius:4px; margin-left:auto'>OBLIGATORIO</span>";614 contentArea.appendChild(actTitle);615 616 const actCard = document.createElement('div');617 actCard.className = 'card';618 actCard.style.borderLeft = "4px solid #d4af37";619 let actHtml = `<ul style="margin:0; padding-left:20px; color:#475569; font-size:0.9rem;">`;620 programData.activation.forEach(item => {621 actHtml += `<li style="margin-bottom:8px"><b>${item.name}:</b> ${item.sets} <br><span style="font-size:0.8rem; opacity:0.8">${item.note}</span></li>`;622 });623 actHtml += `</ul>`;624 actCard.innerHTML = actHtml;625 contentArea.appendChild(actCard);626 }627 628 // Ejercicios629 const woTitle = document.createElement('div');630 woTitle.className = 'section-title';631 woTitle.textContent = "Bloque de Fuerza";632 contentArea.appendChild(woTitle);633 634 dayData.exercises.forEach(ex => {635 const card = document.createElement('div');636 card.className = `card`;637 638 const videoLink = ex.video ? `<a href="${ex.video}" target="_blank" class="video-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg> Video</a>` : '';639 640 let setsHtml = '';641 for(let i=1; i <= ex.setsCount; i++) {642 const isDone = getSetState(ex.id, i);643 setsHtml += `<div class="set-bubble ${isDone ? 'completed' : ''}" onclick="toggleSet('${ex.id}', ${i}, this)">${i}</div>`;644 }645 646 const timerId = `timer_${ex.id}`;647 const btnId = `btn_${ex.id}`;648 649 const bioClass = ex.isCorrection ? 'bio-note correction' : 'bio-note';650 const tagCorrection = ex.isCorrection ? '<span class="tag tag-alert">CORRECCIÓN</span>' : '';651 652 card.innerHTML = `653 <div class="card-header">654 <h3 class="exercise-name">${ex.name}</h3>655 </div>656 <div class="tags">657 ${tagCorrection}658 <span class="tag tag-sets">${ex.setsLabel}</span>659 <span class="tag tag-rpe">RPE: ${ex.rpe}</span>660 <span class="tag tag-tempo">Tempo: ${ex.tempo}</span>661 </div>662 <div class="${bioClass}">🧬 ${ex.bio}</div>663 <div class="exercise-detail">${ex.details}</div>664 665 <div class="sets-wrapper">666 <span class="sets-label">Series:</span>667 <div class="set-bubbles">${setsHtml}</div>668 </div>669 670 <div class="actions-bar">671 ${videoLink}672 ${ex.restTime > 0 ? `673 <button id="${btnId}" class="timer-btn" onclick="startTimer(${ex.restTime}, '${timerId}', '${btnId}')">674 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg> 675 ${ex.restTime}s676 </button>` : ''}677 </div>678 <div id="${timerId}" class="timer-display"></div>679 `;680 contentArea.appendChild(card);681 });682 };683 684 // --- FUNCIÓN ESPECÍFICA PARA LA PESTAÑA DATA ---685 function renderDataTab() {686 const html = `687 <div class="data-card">688 <h3 class="data-title">689 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>690 Análisis Biomecánico691 </h3>692 <div class="data-text">693 <span class="data-subtitle">Ecto-Mesomorfo (Torso corto / Piernas largas)</span>694 <p>Tu estructura dificulta la sentadilla tradicional (Barra tras nuca) obligándote a inclinarte. <strong>Solución:</strong> Usaremos variantes frontales (Goblet) con talones elevados. Esto verticaliza tu torso.</p>695 696 <span class="data-subtitle">Escoliosis & Asimetría</span>697 <p>Dado que tienes una rotación en "S" e inclinación pélvica, el 60% de tu programa es <strong>UNILATERAL</strong>. Si trabajas con barra siempre, el lado fuerte compensa. Con mancuernas, obligamos al lado débil a trabajar.</p>698 699 <span class="data-subtitle">Condromalacia (Rodilla)</span>700 <p>Eliminamos la prensa y extensiones agresivas. Tu prioridad es fortalecer <strong>Cadena Posterior</strong> (Isquios y Glúteo) para quitar presión a la rótula.</p>701 </div>702 </div>703 704 <div class="data-card" style="border-left-color: #d4af37;">705 <h3 class="data-title" style="color: #b49324;">706 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 18v-6a9 9 0 0 1 18 0v6"/><path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"/></svg>707 Nutrición & Suplementos708 </h3>709 <div class="data-text">710 <span class="data-subtitle">Perfil Pescetariano (8/10 Calidad)</span>711 <p>Tu alimentación base es excelente. Solo ajustaremos el <strong>Timing Proteico</strong>. Asegura tomar tu isolado o huevos/pescado en la ventana post-entreno para optimizar recuperación.</p>712 713 <span class="data-subtitle">Suplementación Activa</span>714 <ul style="padding-left: 20px; margin: 5px 0;">715 <li><strong>Creatina:</strong> Mantener 5g diarios (Vital para cerebro y músculo en tu edad).</li>716 <li><strong>Vitamina D3+K2:</strong> Esencial para fijar el calcio en huesos.</li>717 <li><strong>Magnesio:</strong> Seguir tomando de noche (ayuda al sistema nervioso).</li>718 </ul>719 </div>720 </div>721 722 <div class="data-card" style="border-left-color: #ec4899;">723 <h3 class="data-title" style="color: #db2777;">724 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>725 Salud Ósea (Menopausia)726 </h3>727 <div class="data-text">728 <p>Raquel, en esta etapa (49-57 años), el estrógeno baja y los huesos pierden densidad. El <strong>Entrenamiento de Fuerza</strong> no es negociable; es tu medicina.</p>729 <p>La tracción mecánica que ejercen los músculos sobre el hueso al levantar pesas estimula la creación de nuevo tejido óseo (osteoblastos). Este programa está diseñado para ser seguro para tus articulaciones pero lo suficientemente intenso para tus huesos.</p>730 </div>731 </div>732 `;733 contentArea.innerHTML = html;734 }735 </script>736</body>737</html>