/* === Sistema de diseño del prototipo «Gym App» — copiado VERBATIM (s142). NO editar a mano salvo tokens. === */ /* Tokens, temas (carbon/medianoche/pista), acentos (oklch), base, btns, cards, chips */ /* ════════════════════════════════════════════════════════════ GYM · sistema de temas + tokens Cambiar tema = data-theme en . Acento = data-accent. ════════════════════════════════════════════════════════════ */ :root { --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-xl: 34px; --r-pill: 999px; --ease: cubic-bezier(.22,1,.36,1); --ease-bounce: cubic-bezier(.34,1.56,.64,1); --shadow-pop: 0 18px 50px -18px rgba(0,0,0,.55); --font-display: 'Bebas Neue', 'DM Sans', sans-serif; --font-ui: 'DM Sans', system-ui, sans-serif; --font-mono: 'DM Mono', ui-monospace, monospace; } /* ── ACENTOS (misma L/C, varía H) ───────────────────────────── */ [data-accent="lima"] { --accent: oklch(0.86 0.20 128); --accent-ink:#0b1402; --accent-soft: oklch(0.86 0.20 128 / .14); } [data-accent="naranja"] { --accent: oklch(0.76 0.18 52); --accent-ink:#1a0c00; --accent-soft: oklch(0.76 0.18 52 / .15); } [data-accent="azul"] { --accent: oklch(0.72 0.15 248); --accent-ink:#020a16; --accent-soft: oklch(0.72 0.15 248 / .16); } [data-accent="magenta"] { --accent: oklch(0.72 0.20 350); --accent-ink:#16020c; --accent-soft: oklch(0.72 0.20 350 / .15); } [data-accent="violeta"] { --accent: oklch(0.70 0.16 295); --accent-ink:#0c0216; --accent-soft: oklch(0.70 0.16 295 / .16); } /* ── TEMA: Carbón (oscuro, por defecto) ─────────────────────── */ [data-theme="carbon"] { --bg: oklch(0.16 0.006 270); --bg-grad: radial-gradient(120% 80% at 50% -10%, oklch(0.22 0.012 270) 0%, oklch(0.15 0.006 270) 55%); --surface: oklch(0.21 0.008 270); --surface-2: oklch(0.25 0.010 270); --surface-3: oklch(0.30 0.012 270); --text: oklch(0.97 0.004 270); --text-2: oklch(0.74 0.010 270); --text-3: oklch(0.56 0.012 270); --line: oklch(1 0 0 / .09); --line-2: oklch(1 0 0 / .15); --good: oklch(0.80 0.16 150); --warn: oklch(0.78 0.16 70); --bad: oklch(0.70 0.19 25); color-scheme: dark; } /* ── TEMA: Medianoche (oscuro frío) ─────────────────────────── */ [data-theme="medianoche"] { --bg: oklch(0.17 0.030 264); --bg-grad: radial-gradient(120% 80% at 50% -10%, oklch(0.24 0.045 264) 0%, oklch(0.15 0.028 264) 55%); --surface: oklch(0.22 0.038 264); --surface-2: oklch(0.27 0.044 264); --surface-3: oklch(0.32 0.048 264); --text: oklch(0.97 0.010 264); --text-2: oklch(0.76 0.024 264); --text-3: oklch(0.58 0.030 264); --line: oklch(1 0 0 / .10); --line-2: oklch(1 0 0 / .17); --good: oklch(0.80 0.16 150); --warn: oklch(0.80 0.15 75); --bad: oklch(0.72 0.18 25); color-scheme: dark; } /* ── TEMA: Pista (claro) ────────────────────────────────────── */ [data-theme="pista"] { --bg: oklch(0.96 0.004 95); --bg-grad: radial-gradient(120% 80% at 50% -10%, oklch(0.99 0.006 95) 0%, oklch(0.94 0.004 95) 60%); --surface: oklch(1 0 0); --surface-2: oklch(0.975 0.003 95); --surface-3: oklch(0.94 0.005 95); --text: oklch(0.20 0.010 270); --text-2: oklch(0.44 0.010 270); --text-3: oklch(0.62 0.010 270); --line: oklch(0.20 0.01 270 / .10); --line-2: oklch(0.20 0.01 270 / .16); --good: oklch(0.62 0.16 150); --warn: oklch(0.60 0.16 60); --bad: oklch(0.55 0.20 25); --shadow-pop: 0 18px 50px -18px rgba(20,20,30,.22); color-scheme: light; } /* ════════════════════════════════════════════════════════════ Base ════════════════════════════════════════════════════════════ */ * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } html, body { height: 100%; } body { font-family: var(--font-ui); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; overflow: hidden; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } ::selection { background: var(--accent-soft); } /* ── Stage: centra la app como “dispositivo” en cualquier pantalla ── */ .stage { height: 100dvh; width: 100vw; background: var(--bg-grad); display: flex; align-items: center; justify-content: center; transition: background .5s var(--ease); } .app { position: relative; width: 100%; max-width: 460px; height: 100dvh; max-height: 940px; background: var(--bg); overflow: hidden; display: flex; flex-direction: column; transition: background .5s var(--ease); } /* Tablet (retrato) y desktop pequeño: tarjeta tipo dispositivo centrada */ @media (min-width: 600px) { .app { border-radius: 44px; height: min(94dvh, 920px); box-shadow: 0 40px 120px -30px rgba(0,0,0,.6), 0 0 0 1px var(--line); overflow: hidden; } } /* El layout ancho (rail lateral PC/tablet/TV) vive en gym-screens.css (último en cargar). */ .app::-webkit-scrollbar { display: none; } /* área scrolleable de cada pantalla */ .screen { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; } .screen::-webkit-scrollbar { display: none; } .pad { padding: 22px; } .pad-x { padding-left: 22px; padding-right: 22px; } /* ── Tipografía utilitaria ──────────────────────────────────── */ .display { font-family: var(--font-display); font-weight: 400; line-height: .9; letter-spacing: .01em; } .mono { font-family: var(--font-mono); } .eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); } .muted { color: var(--text-2); } .muted-3 { color: var(--text-3); } /* ── Botones ────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: var(--r-pill); font-weight: 500; font-size: 16px; padding: 16px 24px; transition: transform .12s var(--ease), filter .2s, background .2s; user-select: none; min-height: 52px; } .btn:active { transform: scale(.96); } .btn-accent { background: var(--accent); color: var(--accent-ink); font-weight: 600; } .btn-accent:hover { filter: brightness(1.06); } .btn-ghost { background: var(--surface-2); color: var(--text); } .btn-ghost:hover { background: var(--surface-3); } .btn-block { display: flex; width: 100%; } .btn-lg { padding: 19px 28px; font-size: 17px; min-height: 60px; } /* ── Tarjetas ───────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; } .card-2 { background: var(--surface-2); } /* ── Píldoras / chips ──────────────────────────────────────── */ .chip { display: inline-flex; align-items: center; gap: 7px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 9px 14px; font-size: 13px; color: var(--text-2); font-weight: 500; transition: all .15s var(--ease); } .chip[data-on="true"] { background: var(--accent); color: var(--accent-ink); border-color: transparent; } .chip:active { transform: scale(.95); } /* ── animaciones ───────────────────────────────────────────── */ @keyframes fadeUp { from { transform: translateY(14px); } to { transform: none; } } @keyframes pop { 0% { transform: scale(.7); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } } @keyframes ringPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } } @keyframes shimmer { to { background-position: -200% 0; } } /* estado por defecto VISIBLE; la animación es solo entrada (no gatea visibilidad) */ .fade-up { opacity: 1; animation: fadeUp .5s var(--ease); } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* placeholder rayado para imágenes (cuando hagan falta) */ .ph { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 10px, var(--surface-3) 10px, var(--surface-3) 20px); display: flex; align-items: center; justify-content: center; color: var(--text-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; }