@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&display=swap'); /* ─── PALETA: variables CSS para modo light/dark automático ─── */ /* Light mode (default). Override en @media (prefers-color-scheme: dark) abajo. */ :root{ /* Color de "máximo contraste" de marca: negro en claro, blanco en oscuro. En claro resuelve a #000 (idéntico a hoy) — el modo claro NO cambia. */ --c-negro:#000; /* barras de macros, números grandes, estrella favorita */ --c-negro-txt:#fff; /* texto encima de lo "negro de marca" (blanco en claro) */ --c-gris:#333; /* texto de macros restantes (gris oscuro en claro) */ --bg-app:#f5f5f5; /* Fondo principal de pantallas internas */ --bg-card:#fff; /* Cards, modals, inputs */ --bg-soft:#f7f7f7; /* Headers de cards, secciones */ --bg-softer:#f0f0f0; /* Tabs inactivas */ --bg-soft2:#eee; /* Bordes/separadores light */ --text:#000; /* Texto principal sobre bg-card */ --text-strong:#111; /* Texto énfasis */ --text-pale:#333; /* Texto valores */ --text-secondary:#555; /* Texto secundario */ --text-muted:#666; /* Texto muted */ --text-faint:#999; /* Texto faint */ --text-fainter:#aaa; /* Texto fainter / placeholders dark */ --text-bb:#bbb; /* Texto labels chicos */ --text-disabled:#ccc; /* Iconos delete / disabled */ --border:rgba(0,0,0,0.1); /* Bordes inputs */ --border-soft:rgba(0,0,0,0.08); /* Bordes de cards */ --border-faint:rgba(0,0,0,0.06); /* Bordes muy sutiles */ --border-strong:rgba(0,0,0,0.15); /* Bordes botones */ --shadow-card:rgba(0,0,0,0.06); --shadow-soft:rgba(17,17,17,0.10); } /* Dark mode: activado manualmente via data-theme="dark" en (NO automático) */ [data-theme="dark"]{ --c-negro:#fff; /* en oscuro, lo "negro de marca" se vuelve blanco */ --c-negro-txt:#000; /* texto encima → negro en oscuro */ --c-gris:#b8b8b8; /* gris oscuro → gris claro legible en oscuro */ --bg-app:#0a0a0a; --bg-card:#1a1a1a; --bg-soft:#222; --bg-softer:#262626; --bg-soft2:#3a3a3a; /* En dark mode todos los grises se aclaran cerca del blanco para legibilidad */ --text:#fff; --text-strong:#fff; --text-pale:#f0f0f0; --text-secondary:#e5e5e5; --text-muted:#d0d0d0; --text-faint:#b8b8b8; --text-fainter:#a0a0a0; --text-bb:#909090; --text-disabled:#777; --border:rgba(255,255,255,0.15); --border-soft:rgba(255,255,255,0.1); --border-faint:rgba(255,255,255,0.06); --border-strong:rgba(255,255,255,0.2); --shadow-card:rgba(0,0,0,0.5); --shadow-soft:rgba(0,0,0,0.6); } /* Defaults heredables en dark mode */ [data-theme="dark"] body, [data-theme="dark"] .screen, [data-theme="dark"] .nbtn, [data-theme="dark"] .cc, [data-theme="dark"] .gc{color:var(--text);} [data-theme="dark"] svg{color:var(--text);} *{margin:0;padding:0;box-sizing:border-box;} body{font-family:'Barlow',sans-serif;background:#111;min-height:100dvh;display:flex;align-items:center;justify-content:center;} .phone-frame{width:390px;height:844px;background:#000;border-radius:50px;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,0.6),inset 0 0 0 1px rgba(255,255,255,0.1);display:flex;flex-direction:column;position:relative;} .bg{position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 16v8M16 20h8' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1'/%3E%3C/svg%3E");} .screen{display:none;flex-direction:column;height:100%;position:relative;z-index:10;overflow-y:auto;} .screen.active{display:flex;animation:fadeUp 0.3s ease both;} @keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}} .bottom{width:100%;padding:0 24px 44px;flex-shrink:0;} .btn-primary{width:100%;padding:18px;background:#fff;color:#000;border:none;border-radius:14px;font-family:'Barlow',sans-serif;font-size:16px;font-weight:600;cursor:pointer;transition:transform 0.15s,background 0.15s;margin-bottom:20px;} .btn-primary:active{transform:scale(0.97);} .btn-primary:disabled{background:rgba(255,255,255,0.35);color:rgba(0,0,0,0.45);cursor:not-allowed;transform:none;} .register-link{text-align:center;color:rgba(255,255,255,0.5);font-size:14px;} .register-link a{color:#fff;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,0.4);cursor:pointer;} .top-bar{display:flex;align-items:center;padding:52px 24px 0;flex-shrink:0;} .back-btn{background:none;border:none;color:#fff;font-family:'Barlow',sans-serif;font-size:16px;font-weight:500;cursor:pointer;padding:0;} .form-area{flex:1;padding:28px 24px 0;overflow-y:auto;} .fl{font-size:12px;font-weight:500;color:rgba(255,255,255,0.55);margin-bottom:7px;letter-spacing:0.06em;text-transform:uppercase;} .fi{width:100%;padding:15px 16px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);border-radius:12px;color:#fff;font-family:'Barlow',sans-serif;font-size:16px;margin-bottom:18px;outline:none;transition:border-color 0.2s;} .fi:focus{border-color:rgba(255,255,255,0.4);} .fi::placeholder{color:rgba(255,255,255,0.22);} .progress-bar{display:flex;gap:6px;margin:20px 24px 0;flex-shrink:0;} .ps{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,0.15);} .ps.done{background:#fff;} .gb{flex:1;padding:20px 12px;background:rgba(255,255,255,0.06);border:1.5px solid rgba(255,255,255,0.12);border-radius:14px;color:rgba(255,255,255,0.6);font-family:'Barlow',sans-serif;font-size:15px;font-weight:500;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px;transition:all 0.2s;} .gb.selected{background:rgba(255,255,255,0.12);border-color:#fff;color:#fff;} .nb{width:100%;padding:18px 20px;background:#141414;border:1px solid rgba(255,255,255,0.14);border-radius:14px;color:#fff;font-family:'Barlow',sans-serif;cursor:pointer;text-align:left;margin-bottom:12px;transition:all 0.15s;-webkit-appearance:none;appearance:none;background-image:none;} .regcc,.regte{width:100%;padding:15px 20px;background:#141414;border:1px solid rgba(255,255,255,0.14);border-radius:999px;color:#fff;font-family:'Barlow',sans-serif;font-size:15px;font-weight:500;cursor:pointer;text-align:center;margin-bottom:10px;transition:all 0.15s;-webkit-appearance:none;appearance:none;background-image:none;} .nb.selected,.regcc.selected,.regte.selected{background:#fff;color:#0A0A0A;border:1.5px solid #fff;} .regcc.selected,.regte.selected{font-weight:600;} .nb.selected > div:nth-child(2){color:rgba(10,10,10,0.6) !important;} /* DIARIO */ #diario{background:var(--bg-app);} .dh{background:var(--bg-card);padding:52px 20px 12px;flex-shrink:0;border-bottom:1px solid var(--border-soft);} .tr{display:flex;gap:6px;} .tb{flex:1;padding:9px;border:none;background:var(--bg-softer);font-family:'Barlow',sans-serif;font-size:15px;font-weight:500;color:var(--text-faint);border-radius:10px;cursor:pointer;transition:all 0.2s;} .tb.active{background:#000;color:#fff;} .db{flex:1;overflow-y:auto;padding:14px;} .gc{background:var(--bg-card);border-radius:18px;padding:18px;margin-bottom:12px;} .gw{display:flex;justify-content:center;position:relative;margin-bottom:14px;} .gn{position:absolute;bottom:0;left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap;} .mbr{display:flex;align-items:center;gap:8px;margin-bottom:8px;} .mbr .mn{font-size:13px;color:var(--text-secondary);width:72px;flex-shrink:0;} .mbt{flex:1;height:7px;background:var(--bg-soft2);border-radius:4px;overflow:hidden;} .mbf{height:100%;border-radius:4px;transition:width 0.5s ease;} .mbr .mv{font-size:12px;color:var(--text-pale);font-weight:500;width:88px;text-align:right;flex-shrink:0;white-space:nowrap;} .cc{flex:1;background:var(--bg-card);border-radius:16px;padding:14px 8px;text-align:center;cursor:pointer;border:2px solid transparent;transition:all 0.2s;} .cc:active{transform:scale(0.97);} .cc.hf{border-color:var(--text);} .nb2{display:flex;background:var(--bg-card);border-top:1px solid var(--border-soft);padding:10px 0 20px;flex-shrink:0;} .nbtn{flex:1;background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;font-family:'Barlow',sans-serif;font-size:11px;} /* PANTALLA COMIDA */ #pantalla-comida{background:var(--bg-app);} .pch{background:var(--bg-card);padding:52px 20px 14px;flex-shrink:0;border-bottom:1px solid var(--border-soft);} .pcs{margin:12px 16px;background:var(--bg-card);border-radius:14px;padding:12px 16px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 4px var(--shadow-card);flex-shrink:0;} .pcs input{flex:1;border:none;background:transparent;font-family:'Barlow',sans-serif;font-size:16px;outline:none;color:var(--text);} .pcs input::placeholder{color:var(--text-bb);} .pca{display:flex;gap:10px;padding:0 16px 12px;flex-shrink:0;} .pcab{flex:1;background:var(--bg-card);border:none;border-radius:12px;padding:12px 8px;font-family:'Barlow',sans-serif;font-size:13px;font-weight:600;color:var(--text);cursor:pointer;text-align:center;box-shadow:0 1px 4px var(--shadow-card);} .pcbody{flex:1;overflow-y:auto;padding:0 16px;} .es{background:var(--bg-card);border-radius:14px;padding:28px 20px;text-align:center;margin-bottom:10px;} .es p{color:var(--text-faint);font-size:15px;line-height:1.6;} .sri{background:var(--bg-card);border-radius:12px;padding:14px 16px;margin-bottom:8px;cursor:pointer;transition:all 0.15s;} .sri:active{transform:scale(0.98);opacity:0.8;} .srn{font-size:15px;font-weight:600;color:var(--text);} .srs{font-size:12px;color:var(--text-faint);margin-top:3px;} .srk{float:right;font-size:14px;font-weight:600;color:var(--text);} .fi2{background:var(--bg-card);border-radius:12px;padding:14px 16px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;} .pct{background:var(--bg-card);border-radius:14px;padding:14px 16px;margin:8px 16px 16px;flex-shrink:0;} .tr2{display:flex;justify-content:space-between;padding:5px 0;font-size:14px;} .dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;} /* MODAL */ #modal-cantidad{position:absolute;inset:0;background:rgba(0,0,0,0.5);z-index:200;display:none;flex-direction:column;justify-content:flex-end;border-radius:50px;overflow:hidden;} #modal-cantidad.visible{display:flex;} .mc{background:var(--bg-card);border-radius:24px 24px 0 0;padding:24px 24px 40px;} .mfn{font-size:17px;font-weight:600;color:var(--text);margin-bottom:3px;} .mfu{font-size:13px;color:var(--text-faint);margin-bottom:16px;} .miw{background:var(--bg-app);border-radius:14px;padding:16px;text-align:center;margin-bottom:12px;} .mil{font-size:13px;color:var(--text-faint);margin-bottom:6px;} .mi{width:100%;border:none;background:transparent;font-family:'Barlow',sans-serif;font-size:34px;font-weight:600;text-align:center;outline:none;color:var(--text);} .mm{background:var(--bg-app);border-radius:14px;padding:14px 16px;margin-bottom:16px;} .mr{display:flex;justify-content:space-between;padding:4px 0;font-size:14px;} .mb{width:100%;padding:16px;background:#000;color:#fff;border:none;border-radius:14px;font-family:'Barlow',sans-serif;font-size:16px;font-weight:600;cursor:pointer;} .ctipo{padding:8px 14px;background:var(--bg-app);border:1.5px solid transparent;border-radius:20px;font-family:'Barlow',sans-serif;font-size:13px;color:var(--text-secondary);cursor:pointer;transition:all 0.2s;} .ctipo.active{background:#000;color:#fff;border-color:var(--text);} .gym-tab{padding:8px 16px;border:none;background:var(--shadow-card);font-family:'Barlow',sans-serif;font-size:13px;font-weight:500;color:var(--text-muted);border-radius:20px;cursor:pointer;white-space:nowrap;transition:all 0.2s;flex-shrink:0;} .gym-tab.active{background:#000;color:#fff;} .gym-add-day{padding:8px 14px;border:1.5px dashed rgba(0,0,0,0.2);background:transparent;font-family:'Barlow',sans-serif;font-size:13px;color:var(--text-fainter);border-radius:20px;cursor:pointer;white-space:nowrap;flex-shrink:0;} .ex-card{background:var(--bg-card);border-radius:12px;border:1px solid var(--border-soft);margin-bottom:6px;overflow:hidden;} .ex-unidad-sel{padding:3px 4px;border:1px solid rgba(0,0,0,0.1);border-radius:10px;background:transparent;font-family:'Barlow',sans-serif;font-size:11px;color:var(--text-faint);cursor:pointer;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:center;} .ex-unidad-sel.set{color:var(--text-secondary);font-weight:700;} .ex-header{display:flex;align-items:center;gap:6px;padding:7px 10px;background:var(--bg-soft);border-bottom:1px solid var(--shadow-card);} .ex-name{flex:1;border:none;background:transparent;font-family:'Barlow',sans-serif;font-size:15px;font-weight:700;color:var(--text-strong);outline:none;} .ex-badge{padding:3px 8px;border-radius:10px;font-size:11px;font-weight:500;} .ex-badge.up{background:#f0fdf4;color:#16a34a;} .ex-badge.down{background:#fef2f2;color:#dc2626;} .ex-badge.same,.ex-badge.new,.ex-badge.goal{background:var(--bg-soft);color:var(--text-faint);} .ex-chart-btn{padding:3px 9px;border:1px solid rgba(0,0,0,0.1);border-radius:10px;background:transparent;font-family:'Barlow',sans-serif;font-size:11px;color:var(--text-secondary);cursor:pointer;} .ex-del-btn{background:none;border:none;font-size:16px;color:var(--text-disabled);cursor:pointer;padding:2px;} .ex-col-header{display:flex;align-items:center;padding:3px 10px 1px;gap:8px;} .ex-col-lbl{font-size:11px;color:var(--text-bb);} .set-row{display:flex;align-items:center;padding:2px 8px;gap:4px;} .set-num{width:20px;font-size:12px;color:var(--text-bb);text-align:center;flex-shrink:0;} .set-input{flex:1;min-width:0;border:1px solid rgba(0,0,0,0.1);border-radius:6px;padding:3px 4px;font-family:'Barlow',sans-serif;font-size:14px;text-align:center;color:var(--text-strong);background:var(--bg-card);outline:none;-webkit-appearance:none;-moz-appearance:textfield;appearance:textfield;} .set-input::-webkit-outer-spin-button,.set-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;} .set-del{width:20px;flex-shrink:0;background:none;border:none;font-size:12px;color:var(--text-disabled);cursor:pointer;padding:0;} .set-check{width:22px;height:22px;flex-shrink:0;background:transparent;border:1.5px solid #ccc;border-radius:5px;font-size:14px;line-height:1;color:#d4d4d4;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:all 0.15s;} .set-check.completado{background:#16a34a;border-color:#16a34a;color:#fff;} .ex-footer{padding:4px 10px;} .add-set-btn{padding:4px 10px;border:1px dashed rgba(0,0,0,0.15);border-radius:6px;background:transparent;font-family:'Barlow',sans-serif;font-size:11px;color:var(--text-secondary);cursor:pointer;} .gym-stat-card{flex:1;background:var(--bg-card);border-radius:12px;padding:12px;text-align:center;} .gym-stat-label{font-size:11px;color:var(--text-muted);margin-bottom:4px;} .gym-stat-val{font-size:20px;font-weight:700;color:var(--text-strong);} .ctipo{padding:8px 14px;background:var(--bg-app);border:1.5px solid transparent;border-radius:20px;font-family:'Barlow',sans-serif;font-size:13px;color:var(--text-secondary);cursor:pointer;transition:all 0.2s;} .ctipo.active{background:#000;color:#fff;border-color:var(--text);} .gym-tab{padding:8px 16px;border:none;background:var(--shadow-card);font-family:'Barlow',sans-serif;font-size:13px;font-weight:500;color:var(--text-muted);border-radius:20px;cursor:pointer;white-space:nowrap;transition:all 0.2s;flex-shrink:0;} .gym-tab.active{background:#000;color:#fff;} .gym-add-day{padding:8px 14px;border:1.5px dashed rgba(0,0,0,0.2);background:transparent;font-family:'Barlow',sans-serif;font-size:13px;color:var(--text-fainter);border-radius:20px;cursor:pointer;white-space:nowrap;flex-shrink:0;} .ex-card{background:var(--bg-card);border-radius:12px;border:1px solid var(--border-soft);margin-bottom:6px;overflow:hidden;} .ex-header{display:flex;align-items:center;gap:6px;padding:7px 10px;background:var(--bg-soft);border-bottom:1px solid var(--shadow-card);} .ex-name{flex:1;border:none;background:transparent;font-family:'Barlow',sans-serif;font-size:15px;font-weight:700;color:var(--text-strong);outline:none;} .ex-badge{padding:3px 8px;border-radius:10px;font-size:11px;font-weight:500;} .ex-badge.up{background:#f0fdf4;color:#16a34a;} .ex-badge.down{background:#fef2f2;color:#dc2626;} .ex-badge.same,.ex-badge.new,.ex-badge.goal{background:var(--bg-soft);color:var(--text-faint);} .ex-chart-btn{padding:3px 9px;border:1px solid rgba(0,0,0,0.1);border-radius:10px;background:transparent;font-family:'Barlow',sans-serif;font-size:11px;color:var(--text-secondary);cursor:pointer;} .ex-del-btn{background:none;border:none;font-size:16px;color:var(--text-disabled);cursor:pointer;padding:2px;} .ex-col-header{display:flex;align-items:center;padding:3px 10px 1px;gap:8px;} .ex-col-lbl{font-size:11px;color:var(--text-bb);} .set-row{display:flex;align-items:center;padding:2px 8px;gap:4px;} .set-num{width:20px;font-size:12px;color:var(--text-bb);text-align:center;flex-shrink:0;} .set-input{flex:1;min-width:0;border:1px solid rgba(0,0,0,0.1);border-radius:6px;padding:3px 4px;font-family:'Barlow',sans-serif;font-size:14px;text-align:center;color:var(--text-strong);background:var(--bg-card);outline:none;-webkit-appearance:none;-moz-appearance:textfield;appearance:textfield;} .set-input::-webkit-outer-spin-button,.set-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;} .set-del{width:20px;flex-shrink:0;background:none;border:none;font-size:12px;color:var(--text-disabled);cursor:pointer;padding:0;} .set-check{width:22px;height:22px;flex-shrink:0;background:transparent;border:1.5px solid #ccc;border-radius:5px;font-size:14px;line-height:1;color:#d4d4d4;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:all 0.15s;} .set-check.completado{background:#16a34a;border-color:#16a34a;color:#fff;} .ex-footer{padding:4px 10px;} .add-set-btn{padding:4px 10px;border:1px dashed rgba(0,0,0,0.15);border-radius:6px;background:transparent;font-family:'Barlow',sans-serif;font-size:11px;color:var(--text-secondary);cursor:pointer;} .gym-stat-card{flex:1;background:var(--bg-card);border-radius:12px;padding:12px;text-align:center;} .gym-stat-label{font-size:11px;color:var(--text-muted);margin-bottom:4px;} .gym-stat-val{font-size:20px;font-weight:700;color:var(--text-strong);} .ptab{flex:1;padding:9px;border:none;background:var(--bg-softer);font-family:'Barlow',sans-serif;font-size:14px;font-weight:500;color:var(--text-faint);border-radius:10px;cursor:pointer;transition:all 0.2s;} .ptab.active{background:#000;color:#fff;} .ai-momento{background:var(--bg-card);border:1px solid var(--shadow-soft);border-radius:18px;padding:24px 16px;display:flex;flex-direction:column;align-items:center;gap:12px;font-family:'Geist','Inter',system-ui,sans-serif;font-size:15px;font-weight:500;color:var(--text-strong);cursor:pointer;transition:all 0.2s;} .ai-momento span{display:block;font-size:15px;font-weight:500;} .ai-momento.active{background:#111;color:#fff;border-color:var(--text-strong);} .ai-pref{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;background:var(--bg-card);color:var(--text-strong);border:1px solid var(--shadow-soft);font-family:'Geist','Inter',system-ui,sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:all 0.15s;} .ai-pref.active{background:#111;color:#fff;border-color:var(--text-strong);} @keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} @keyframes ai-slide{0%{transform:translateX(-100%)}100%{transform:translateX(450%)}} .ai-card{background:var(--bg-card);border:1px solid var(--shadow-soft);border-radius:18px;padding:16px;margin-bottom:12px;color:var(--text-strong);} .ai-card h3{font-family:'Instrument Serif',Georgia,serif;font-size:19px;letter-spacing:-0.2px;line-height:1.2;font-weight:400;color:var(--text-strong);margin:0;} .ai-card p{font-size:13px;color:var(--text-strong);line-height:1.45;margin-top:8px;} .ai-card p.razon{font-size:12px;color:rgba(17,17,17,0.6);line-height:1.5;margin-top:8px;} .ai-macros{display:flex;gap:8px;margin-top:12px;} .ai-macro-badge{flex:1;background:#f8f6f1;border:1px solid var(--shadow-soft);border-radius:12px;padding:10px 0;text-align:center;font-size:10px;color:rgba(17,17,17,0.6);letter-spacing:0.4px;} .ai-macro-badge strong{display:block;font-family:'Instrument Serif',Georgia,serif;font-size:22px;line-height:1;color:var(--text-strong);font-weight:400;margin-bottom:4px;} .ubtn{padding:10px 16px;background:var(--bg-app);border:1.5px solid transparent;border-radius:20px;font-family:'Barlow',sans-serif;font-size:14px;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all 0.2s;} .ubtn.active{background:#000;color:#fff;border-color:#2d7a3a;} .gbtn2{padding:10px 16px;background:var(--bg-app);border:1.5px solid transparent;border-radius:20px;font-family:'Barlow',sans-serif;font-size:14px;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all 0.2s;} .gbtn2.active{background:#000;color:#fff;border-color:var(--text);} @media(max-width:479px){ body{background:#000;} .phone-frame{width:100%;height:100dvh;border-radius:0;box-shadow:none;} #modal-cantidad{border-radius:0;} } /* ============================================== */ /* MODO LECTURA FÁCIL — opt-in desde Perfil */ /* Default: cero cambios para todos los macreros. */ /* Solo se activa cuando body tiene la clase. */ /* ============================================== */ /* Contadores de macros del diario — más grandes y oscuros. El font-size:11px está inline en el div interno, hay que apuntarle directo. */ body.modo-lectura .macros-row [style*="font-size:11px"] { font-size: 14px !important; } body.modo-lectura .macros-row span { color:var(--text) !important; } /* Calorías del header del diario */ body.modo-lectura .gn > div:last-child { font-size: 13px !important; color:var(--text) !important; } /* Bottom nav — el JS asigna color via .style (que se normaliza a rgb() y no matcha attribute selectors). Regla específica garantizada. */ body.modo-lectura .nbtn { color:var(--text) !important; } /* Grises claros → negro (textos secundarios y placeholders) */ body.modo-lectura *[style*="color:var(--text-faint)"] { color:var(--text) !important; } body.modo-lectura *[style*="color:var(--text-fainter)"] { color:var(--text) !important; } body.modo-lectura *[style*="color:var(--text-bb)"] { color:var(--text) !important; } body.modo-lectura *[style*="color:var(--text-disabled)"] { color:var(--text) !important; } body.modo-lectura *[style*="color:#888"] { color:var(--text) !important; } body.modo-lectura *[style*="color:#777"] { color:var(--text) !important; } body.modo-lectura *[style*="color:var(--text-muted)"] { color:var(--text) !important; } /* Grises medios — los oscurecemos también */ body.modo-lectura *[style*="color:var(--text-secondary)"] { color:var(--text) !important; } body.modo-lectura *[style*="color:#444"] { color:var(--text) !important; } /* Grises rgba — variantes con opacidad */ body.modo-lectura *[style*="rgba(17,17,17,0.62)"] { color:var(--text) !important; } body.modo-lectura *[style*="rgba(17,17,17,0.6)"] { color:var(--text) !important; } body.modo-lectura *[style*="rgba(17,17,17,0.55)"] { color:var(--text) !important; } body.modo-lectura *[style*="rgba(17,17,17,0.42)"] { color:var(--text) !important; } /* Blancos translúcidos (sobre fondos oscuros) → blanco puro */ body.modo-lectura *[style*="color:rgba(255,255,255,0.7)"] { color: #fff !important; } body.modo-lectura *[style*="color:rgba(255,255,255,0.55)"] { color: #fff !important; } body.modo-lectura *[style*="color:rgba(255,255,255,0.5)"] { color: #fff !important; } body.modo-lectura *[style*="color:rgba(255,255,255,0.45)"] { color: #fff !important; } body.modo-lectura *[style*="color:rgba(255,255,255,0.4)"] { color: #fff !important; } body.modo-lectura *[style*="color:rgba(255,255,255,0.35)"] { color: #fff !important; } /* ============================================== */ /* MODO AMPLIADO — agrega tamaño al panel del */ /* speedometer (Diario + Semanal). Se activa junto */ /* con modo-lectura ('Lectura fácil y ampliada'). */ /* ============================================== */ body.modo-ampliado .gw svg { width: 220px !important; height: 123px !important; } body.modo-ampliado .gn > div:first-child { font-size: 36px !important; } body.modo-ampliado .gn > div:last-child { font-size: 14px !important; } /* Contadores de macros — el font-size:11px está inline en el div interno. Los spans heredan del padre, así que solo hay que cambiar ese div. 15px es el límite para que los números largos del semanal (4 dígitos) quepan en 3 columnas sin desbordar. */ body.modo-ampliado .macros-row [style*="font-size:11px"] { font-size: 15px !important; } body.modo-ampliado .gc { padding: 18px 16px !important; } body.modo-ampliado .mbt { height: 8px !important; } /* Toggle de Configuración Visual */ .config-visual-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; cursor: pointer; } .config-visual-row input[type="radio"] { margin-top: 3px; flex-shrink: 0; accent-color:var(--text); width: 18px; height: 18px; } .config-visual-row .cv-label { font-size: 15px; font-weight: 600; color:var(--text); } .config-visual-row .cv-desc { font-size: 12px; color: #666; margin-top: 2px; line-height: 1.4; } /* ─── Gym Achievements (módulo en assets/js/04-gym-achievements.js) ─── */ .gym-ach-overlay { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.85); align-items: center; justify-content: center; padding: 20px; } .gym-ach-modal { background:var(--bg-card); border-radius: 22px; max-width: 380px; width: 100%; max-height: 85vh; padding: 28px 22px 22px; text-align: center; display: flex; flex-direction: column; } .gym-ach-titulo { font-family: 'Barlow', sans-serif; font-size: 22px; font-weight: 700; color:var(--text); margin-bottom: 18px; line-height: 1.25; } .gym-ach-lista { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; overflow-y: auto; flex: 1; min-height: 0; } .gym-ach-item { display: flex; gap: 12px; align-items: flex-start; background: #f7f7f7; border-radius: 14px; padding: 14px 14px; text-align: left; } .gym-ach-item-icon { font-size: 28px; flex-shrink: 0; line-height: 1; } .gym-ach-item-body { flex: 1; min-width: 0; } .gym-ach-item-titulo { font-family: 'Barlow', sans-serif; font-size: 13px; font-weight: 700; color:var(--text); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 2px; } .gym-ach-item-ejercicio { font-family: 'Barlow', sans-serif; font-size: 14px; color: #555; margin-bottom: 4px; } .gym-ach-item-valor { font-family: 'Barlow', sans-serif; font-size: 18px; font-weight: 700; color:var(--text); } .gym-ach-item-prev { font-family: 'Barlow', sans-serif; font-size: 12px; color: #888; margin-top: 3px; } .gym-ach-btn-compartir { width: 100%; padding: 14px; background: #000; color: #fff; border: none; border-radius: 12px; font-family: 'Barlow', sans-serif; font-size: 15px; font-weight: 700; cursor: pointer; margin-bottom: 10px; } .gym-ach-btn-cerrar { width: 100%; padding: 12px; background: transparent; color: #555; border: none; font-family: 'Barlow', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; } /* ─── DARK MODE: overrides para botones primarios e inputs que NO se invirtieron ─── */ [data-theme="dark"]{ /* Botones primarios negros: invertir para verse en dark */ } [data-theme="dark"] .tb.active, [data-theme="dark"] .mb, [data-theme="dark"] .ptab.active, [data-theme="dark"] .ctipo.active, [data-theme="dark"] .gym-tab.active, [data-theme="dark"] .ai-momento.active, [data-theme="dark"] .ai-pref.active, [data-theme="dark"] .ubtn.active, [data-theme="dark"] .gbtn2.active{ background:#fff !important;color:#000 !important;border-color:#fff !important; } /* Barra de macros: track sutil; el relleno (.mbf con var(--c-negro)) es blanco en oscuro y se ve sobre este track. Antes estaba al revés (track blanco, relleno negro = se veía vacío lo lleno). */ [data-theme="dark"] .mbt{background:rgba(255,255,255,0.14) !important;} /* ─── Contraste en oscuro (no aplica a claro ni a tarjetas Wrapped/Ranking/récords) ─── */ /* Botones de acción con fondo negro inline → invertir a blanco-sobre-negro, igual que #gym-save-btn. Las tarjetas protegidas son
, no