/* BookerFitness v3 · Liquid Glass — fuente: rediseño de Victor (theme.css), casi literal. Solo se sirve en /fitness (server.js lo quita del HTML de Media), así que sus clases genéricas (.btn, .glass, .flex…) nunca chocan con Booker Media. Al final: adaptaciones a la app real (scroll del documento en vez del lienzo fijo del mockup) y componentes que el diseño no traía. */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/dm-sans-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/dm-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Sora'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(/fonts/sora-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @property --num { syntax: ''; inherits: false; initial-value: 0; } /* ───────────── Tokens base = midnight ───────────── */ .bf { --font-d: 'Sora', 'Segoe UI', system-ui, sans-serif; --font-b: 'DM Sans', 'Segoe UI', system-ui, sans-serif; --bg: radial-gradient(120% 80% at 50% 0%, #141a44 0%, #070818 62%); --o1: #2f66f0; --o2: #12c9c0; --o3: #00a8ff; --orb-o: .6; --orb-blur: 30px; --glass: rgba(255,255,255,.075); --glass-hi: rgba(26,30,70,.58); --field: rgba(0,0,12,.30); --stroke: rgba(255,255,255,.16); --bw: 1px; --hi: rgba(255,255,255,.32); --lo: rgba(255,255,255,.04); --sweep: rgba(255,255,255,.22); --shadow: 0 24px 48px -24px rgba(0,0,30,.85); --text: #f4f6ff; --dim: rgba(214,222,255,.70); --text-bg: #f4f6ff; --text-bg-shadow: none; --accent: #4d8dff; --accent2: #19d3c5; --on-accent: #fff; --ok: #3ddc97; --btn-bg: linear-gradient(135deg, #2f66f0, #1296d4); --gloss: .55; --btn-ts: 0 1px 1px rgba(0,0,40,.25); --r-lg: 30px; --r-md: 22px; --r-sm: 16px; --r-pill: 999px; --blur: 26px; --gsat: 180%; } .bf[data-theme="frutiger"] { --bg: linear-gradient(165deg, #6ec6ff 0%, #4fb8f0 38%, #5fdcc4 78%, #9af0a0 100%); --o1: #ffffff; --o2: #b8ff7a; --o3: #1e90ff; --orb-o: .75; --orb-blur: 24px; --glass: rgba(255,255,255,.34); --glass-hi: rgba(255,255,255,.58); --field: rgba(255,255,255,.52); --stroke: rgba(255,255,255,.85); --hi: rgba(255,255,255,.95); --lo: rgba(0,90,140,.10); --sweep: rgba(255,255,255,.7); --shadow: 0 18px 40px -18px rgba(0,80,140,.55); --text: #06304d; --dim: rgba(6,48,77,.74); --text-bg: #06304d; --accent: #1473e6; --accent2: #12b5a0; --ok: #0a8f4c; --btn-bg: linear-gradient(180deg, #46a9ff 0%, #1473e6 55%, #0f5fd0 100%); --gloss: 1; --btn-ts: 0 -1px 0 rgba(0,40,110,.45); --r-lg: 34px; --r-md: 26px; --r-sm: 18px; --blur: 20px; --gsat: 170%; } .bf[data-theme="kde"] { --bg: linear-gradient(160deg, #1b1e20, #121517); --o1: #3daee9; --o2: #1d99f3; --o3: #2c5d7a; --orb-o: .26; --orb-blur: 40px; --glass: rgba(49,54,59,.72); --glass-hi: rgba(35,38,41,.92); --field: rgba(18,20,22,.72); --stroke: rgba(239,240,241,.13); --hi: rgba(255,255,255,.10); --lo: rgba(0,0,0,.22); --sweep: rgba(61,174,233,.20); --shadow: 0 10px 24px -12px rgba(0,0,0,.75); --text: #eff0f1; --dim: #a6adb4; --text-bg: #eff0f1; --accent: #3daee9; --accent2: #1d99f3; --on-accent: #08161f; --ok: #27ae60; --btn-bg: linear-gradient(180deg, #52bdf2, #2fa1de); --gloss: .15; --btn-ts: none; --r-lg: 14px; --r-md: 10px; --r-sm: 7px; --blur: 14px; --gsat: 130%; } .bf[data-theme="oneui"] { --bg: linear-gradient(180deg, #f3f5fb, #e7ebf6); --o1: #b5ceff; --o2: #c4ecf2; --o3: #bfeaff; --orb-o: .9; --orb-blur: 44px; --glass: rgba(255,255,255,.72); --glass-hi: rgba(255,255,255,.92); --field: rgba(232,237,248,.95); --stroke: rgba(255,255,255,.95); --hi: #fff; --lo: rgba(60,80,140,.06); --sweep: rgba(255,255,255,.85); --shadow: 0 14px 32px -20px rgba(40,60,120,.38); --text: #101319; --dim: rgba(16,19,25,.64); --text-bg: #101319; --accent: #2563eb; --accent2: #5b8def; --on-accent: #fff; --ok: #0f8f54; --btn-bg: linear-gradient(135deg, #2563eb, #4a86f7); --gloss: .2; --btn-ts: none; --r-lg: 36px; --r-md: 28px; --r-sm: 20px; --blur: 24px; --gsat: 150%; } .bf[data-theme="xp"] { --font-d: Tahoma, 'Trebuchet MS', 'DM Sans', sans-serif; --font-b: Tahoma, Verdana, 'DM Sans', sans-serif; --bg: linear-gradient(180deg, #2b6fe0 0%, #7db4f5 46%, #8ccf4a 47%, #3e8e1f 100%); --o1: #ffffff; --o2: #cfe6ff; --o3: #6fbf3a; --orb-o: .45; --orb-blur: 30px; --glass: rgba(236,233,216,.95); --glass-hi: #ece9d8; --field: #ffffff; --stroke: #0a3fb8; --bw: 2px; --hi: rgba(255,255,255,.9); --lo: rgba(0,0,0,.12); --sweep: rgba(255,255,255,.5); --shadow: 3px 4px 0 rgba(0,20,90,.35); --text: #111; --dim: #46463f; --text-bg: #fff; --text-bg-shadow: 0 1px 3px rgba(0,30,110,.8); --accent: #245edb; --accent2: #3c9a1e; --on-accent: #fff; --ok: #2b8a12; --btn-bg: linear-gradient(180deg, #5aa0f7 0%, #245edb 50%, #1b4fc4 100%); --gloss: .8; --btn-ts: 0 1px 1px rgba(0,20,90,.7); --r-lg: 12px; --r-md: 9px; --r-sm: 6px; --blur: 2px; --gsat: 100%; } .bf[data-theme="aqua"] { --font-d: 'Lucida Grande', 'Sora', system-ui, sans-serif; --font-b: 'Lucida Grande', 'DM Sans', system-ui, sans-serif; --bg: repeating-linear-gradient(0deg, #e8ebf1 0 2px, #f4f6fa 2px 4px); --o1: #8dc4ff; --o2: #c6d9ff; --o3: #b5f0ff; --orb-o: .5; --orb-blur: 50px; --glass: rgba(255,255,255,.58); --glass-hi: rgba(255,255,255,.84); --field: rgba(255,255,255,.88); --stroke: rgba(40,60,100,.24); --hi: rgba(255,255,255,1); --lo: rgba(40,60,100,.08); --sweep: rgba(255,255,255,.9); --shadow: 0 10px 26px -14px rgba(20,40,90,.5); --text: #1c2430; --dim: rgba(28,36,48,.68); --text-bg: #1c2430; --accent: #2a74dd; --accent2: #48b4ff; --on-accent: #fff; --ok: #218a3e; --btn-bg: linear-gradient(180deg, #6fb1ff 0%, #2f7be0 49%, #1f63cc 50%, #4aa0ff 100%); --gloss: 1; --btn-ts: 0 -1px 0 rgba(0,50,120,.6); --r-lg: 22px; --r-md: 16px; --r-sm: 11px; --blur: 18px; --gsat: 160%; } /* Nothing: negro OLED, rejilla de puntos, tipografía mono y el rojo de la marca. Plano: sin desenfoque ni orbes (así tampoco hay blur anidado). Solo oscuro. */ .bf[data-theme="nothing"] { --font-d: 'Space Mono', 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --font-b: 'DM Sans', system-ui, sans-serif; --bg: radial-gradient(circle at 1px 1px, rgba(255,255,255,.16) 1px, transparent 1.4px) 0 0 / 14px 14px, #000; --o1: #d71921; --o2: #ffffff; --o3: #d71921; --orb-o: 0; --orb-blur: 0px; --glass: #0f0f0f; --glass-hi: #1a1a1a; --field: #151515; --stroke: rgba(255,255,255,.14); --bw: 1px; --hi: rgba(255,255,255,.08); --lo: rgba(255,255,255,.02); --sweep: rgba(215,25,33,.22); --shadow: none; --text: #ffffff; --dim: rgba(255,255,255,.62); --text-bg: #ffffff; --text-bg-shadow: none; --accent: #d71921; --accent2: #ff5a5f; --on-accent: #fff; --ok: #6ee7a0; --btn-bg: #d71921; --gloss: 0; --btn-ts: none; --r-lg: 28px; --r-md: 20px; --r-sm: 14px; --r-pill: 999px; --blur: 0px; --gsat: 100%; } .bf[data-theme="nothing"] .eyebrow { font-family: var(--font-d); letter-spacing: .16em; } .bf[data-theme="nothing"] .tag, .bf[data-theme="nothing"] .tnum { font-family: var(--font-d); } /* Pantalla completa del descanso / WOD: fondo y texto por tema (antes: siempre azul-noche con el texto del tema → ilegible en los temas claros). También los lee la app Android para pintar su aviso de "descanso terminado". */ .bf { --rf-scrim: #050716; --rf-text: #f4f6ff; } .bf[data-theme="frutiger"] { --rf-scrim: #d9f1ff; --rf-text: #06304d; } .bf[data-theme="kde"] { --rf-scrim: #121517; --rf-text: #eff0f1; } .bf[data-theme="hyperos"] { --rf-scrim: #050a0b; --rf-text: #f5f7f6; } .bf[data-theme="oneui"] { --rf-scrim: #f3f5fb; --rf-text: #101319; } .bf[data-theme="xp"] { --rf-scrim: #1f56c4; --rf-text: #ffffff; } .bf[data-theme="aqua"] { --rf-scrim: #e8ebf1; --rf-text: #1c2430; } .bf[data-theme="nothing"] { --rf-scrim: #000000; --rf-text: #ffffff; } /* ───────────── Lienzo ───────────── */ .bf { position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--font-b); font-size: 15px; line-height: 1.35; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .bf *, .bf *::before, .bf *::after { box-sizing: border-box; } :where(.bf) :is(button, input, select, textarea) { font: inherit; color: inherit; } :where(.bf) button { cursor: pointer; border: 0; background: none; padding: 0; } :where(.bf) a { color: inherit; text-decoration: none; } :where(.bf) svg { display: block; } :where(.bf) :is(h1, h2, h3, p) { margin: 0; } .bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; } .bg i { position: absolute; border-radius: 50%; filter: blur(var(--orb-blur)); opacity: var(--orb-o); will-change: transform; } .bg i:nth-child(1) { width: min(80%, 760px); aspect-ratio: 1; left: -18%; top: -14%; background: radial-gradient(circle at 35% 35%, var(--o1), transparent 68%); animation: drift1 24s ease-in-out infinite alternate; } .bg i:nth-child(2) { width: min(70%, 680px); aspect-ratio: 1; right: -22%; top: 26%; background: radial-gradient(circle, var(--o2), transparent 68%); animation: drift2 30s ease-in-out infinite alternate; } .bg i:nth-child(3) { width: min(76%, 720px); aspect-ratio: 1; left: 8%; bottom: -26%; background: radial-gradient(circle, var(--o3), transparent 68%); animation: drift3 34s ease-in-out infinite alternate; } @keyframes drift1 { to { transform: translate(22%, 26%) scale(1.18) rotate(40deg); } } @keyframes drift2 { to { transform: translate(-26%, -18%) scale(.88) rotate(-30deg); } } @keyframes drift3 { to { transform: translate(20%, -28%) scale(1.12) rotate(55deg); } } /* ───────────── Utilidades ───────────── */ .flex { display: flex; } .col { flex-direction: column; } .center { align-items: center; } .between { justify-content: space-between; } .end { justify-content: flex-end; } .wrap { flex-wrap: wrap; } .grow { flex: 1 1 0; min-width: 0; } .min0 { min-width: 0; } .rel { position: relative; } .g4 { gap: 4px; } .g8 { gap: 8px; } .g12 { gap: 12px; } .g16 { gap: 16px; } .g20 { gap: 20px; } .g24 { gap: 24px; } .dim { color: var(--dim); } .small { font-size: 13px; } .bold { font-weight: 700; } .on-bg { color: var(--text-bg); text-shadow: var(--text-bg-shadow); } .h1 { font-family: var(--font-d); font-weight: 700; font-size: 28px; letter-spacing: -.02em; line-height: 1.1; } .h2 { font-family: var(--font-d); font-weight: 700; font-size: 21px; letter-spacing: -.015em; line-height: 1.15; } .h3 { font-family: var(--font-d); font-weight: 600; font-size: 16px; letter-spacing: -.005em; } .eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--dim); } .on-bg.eyebrow { color: var(--text-bg); opacity: .8; } .num { font-family: var(--font-d); font-weight: 700; font-size: 36px; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; } .count::after { counter-reset: num var(--num); content: counter(num); animation: count 1680ms cubic-bezier(.25,.1,.15,1) 315ms both; } @keyframes count { from { --num: 0; } to { --num: var(--to); } } .ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; } .ic.sm { width: 18px; height: 18px; } .ic.lg { width: 28px; height: 28px; } .tint { color: var(--accent); } /* ───────────── Cristal líquido ───────────── */ .glass { position: relative; isolation: isolate; background: var(--glass); -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--gsat)); backdrop-filter: blur(var(--blur)) saturate(var(--gsat)); border: var(--bw) solid var(--stroke); border-radius: var(--r-md); box-shadow: var(--shadow), inset 0 1px 0 var(--hi), inset 0 -1px 0 var(--lo); transition: transform 385ms cubic-bezier(.2,.9,.3,1.25), box-shadow 280ms, background 280ms; } .glass::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: .55; background: radial-gradient(120% 70% at 0% 0%, var(--hi) 0%, transparent 46%), linear-gradient(180deg, transparent 62%, var(--lo)); } .glass::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; background: linear-gradient(115deg, transparent 36%, var(--sweep) 50%, transparent 64%); background-size: 260% 100%; background-position: 120% 0; } .glass.live:hover { transform: translateY(-4px) scale(1.012); } .glass.live:hover::after { opacity: 1; animation: sweep 770ms ease forwards; } @keyframes sweep { to { background-position: -70% 0; } } .glass.strong { background: var(--glass-hi); } .pad { padding: 16px; } .pad-lg { padding: 20px; } .pad-xl { padding: 28px; } .r-lg { border-radius: var(--r-lg); } /* entrada escalonada (usa translate/scale para no chocar con hover:transform) */ .rise { animation: rise 595ms cubic-bezier(.2,.9,.25,1.1) both; animation-delay: calc(var(--i, 0) * 49ms + 42ms); } @keyframes rise { from { opacity: 0; translate: 0 22px; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } } .floaty { animation: floaty 6s ease-in-out infinite; } @keyframes floaty { 50% { translate: 0 -6px; } } /* ───────────── Controles ───────────── */ .btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 22px; border-radius: var(--r-pill); max-width: 100%; min-width: 0; /* Nunca cortar ni desbordar el texto: si no cabe, baja a una segunda línea (bug: "Sincronizar ahora"). */ font-size: 14px; line-height: 1.2; white-space: normal; text-wrap: balance; text-align: center; overflow-wrap: anywhere; padding-block: 8px; font-weight: 700; letter-spacing: 0; color: var(--text); background: var(--glass-hi); border: var(--bw) solid var(--stroke); -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--gsat)); backdrop-filter: blur(var(--blur)) saturate(var(--gsat)); box-shadow: inset 0 1px 0 var(--hi), 0 8px 20px -10px rgba(0,0,0,.45); transition: transform 280ms cubic-bezier(.2,.9,.3,1.5), box-shadow 210ms, filter 210ms; } .btn:hover { transform: translateY(-2px) scale(1.04); } .btn:active { transform: scale(.95); } .btn.primary { background: var(--btn-bg); color: var(--on-accent); text-shadow: var(--btn-ts); border-color: rgba(255,255,255,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -10px 18px -10px rgba(0,0,0,.28), 0 14px 30px -12px var(--accent); } .btn.primary::before { content: ""; position: absolute; z-index: -1; left: 5%; right: 5%; top: 2px; height: 48%; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,calc(.55 * var(--gloss))), rgba(255,255,255,0)); } .btn.primary::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%); transform: translateX(-130%); animation: shine 5s ease-in-out infinite; } @keyframes shine { 0%, 62% { transform: translateX(-130%); } 88%, 100% { transform: translateX(130%); } } .btn.block { width: 100%; } .btn.danger { color: #ff7b8a; } .bf[data-theme="frutiger"] .btn.danger, .bf[data-theme="hyperos"] .btn.danger, .bf[data-theme="oneui"] .btn.danger, .bf[data-theme="aqua"] .btn.danger { color: #c01f3a; } .icon-btn { position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: calc(var(--r-sm) + 2px); color: var(--text); transition: transform 280ms cubic-bezier(.2,.9,.3,1.5), background 210ms; } .icon-btn:hover { transform: translateY(-3px) scale(1.08) rotate(-3deg); } .icon-btn:active { transform: scale(.92); } .icon-btn.primary { background: var(--btn-bg); color: var(--on-accent); border-color: rgba(255,255,255,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 12px 24px -10px var(--accent); } .badge { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--on-accent); background: var(--btn-bg); box-shadow: 0 0 0 2px var(--bg-solid, rgba(0,0,0,.0)), 0 6px 14px -4px var(--accent); animation: pop 2.8s ease-in-out infinite; } @keyframes pop { 0%, 80%, 100% { scale: 1; } 90% { scale: 1.18; } } .avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.55), transparent 45%), linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 10px 24px -8px var(--accent); } .chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 20px; border-radius: var(--r-pill); max-width: 100%; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; line-height: 1; font-weight: 600; background: var(--glass); border: var(--bw) solid var(--stroke); box-shadow: inset 0 1px 0 var(--hi); transition: transform 280ms cubic-bezier(.2,.9,.3,1.5), background 210ms, box-shadow 210ms; } .chip:hover { transform: translateY(-2px) scale(1.04); } .chip:active { transform: scale(.95); } .chip.on { background: var(--btn-bg); color: var(--on-accent); text-shadow: var(--btn-ts); border-color: rgba(255,255,255,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 22px -10px var(--accent); } .seg { display: flex; gap: 6px; padding: 6px; border-radius: var(--r-pill); background: var(--field); border: var(--bw) solid var(--stroke); box-shadow: inset 0 2px 6px rgba(0,0,0,.15); } .seg .chip { flex: 1 1 0; min-width: 0; background: transparent; border-color: transparent; box-shadow: none; } .seg .chip.on { background: var(--btn-bg); } .field { width: 100%; min-height: 48px; border-radius: var(--r-sm); background: var(--field); border: var(--bw) solid var(--stroke); padding: 0 14px; color: var(--text); box-shadow: inset 0 2px 6px rgba(0,0,0,.16); outline: none; transition: box-shadow 210ms, border-color 210ms; } .field::placeholder { color: var(--dim); opacity: .8; } .field:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent), inset 0 2px 6px rgba(0,0,0,.12); } .field.center-t { text-align: center; font-family: var(--font-d); font-weight: 600; font-size: 18px; } .toggle { position: relative; width: 56px; height: 34px; flex: none; border-radius: 99px; background: var(--field); border: var(--bw) solid var(--stroke); box-shadow: inset 0 2px 6px rgba(0,0,0,.2); transition: background 280ms; } .toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #fff, #dfe5f4); box-shadow: 0 4px 10px rgba(0,0,0,.35); transition: transform 350ms cubic-bezier(.3,1.7,.5,1); } .toggle.on { background: linear-gradient(135deg, var(--ok), var(--accent)); } .toggle.on::after { transform: translateX(22px); } .slider { -webkit-appearance: none; appearance: none; width: 100%; height: 12px; border-radius: 99px; outline: none; border: var(--bw) solid var(--stroke); background: linear-gradient(90deg, var(--accent) var(--v, 40%), var(--field) var(--v, 40%)); box-shadow: inset 0 2px 5px rgba(0,0,0,.2); } .slider::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; border: var(--bw) solid var(--stroke); cursor: pointer; background: radial-gradient(circle at 35% 25%, #fff, #dbe4f7); box-shadow: 0 6px 14px rgba(0,0,0,.35), 0 0 0 6px color-mix(in srgb, var(--accent) 25%, transparent); } .slider::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; border: var(--bw) solid var(--stroke); background: #fff; box-shadow: 0 6px 14px rgba(0,0,0,.35); } .progress { height: 12px; border-radius: 99px; background: var(--field); overflow: hidden; border: var(--bw) solid var(--stroke); box-shadow: inset 0 2px 4px rgba(0,0,0,.2); } .progress > b { display: block; position: relative; height: 100%; width: var(--p, 100%); border-radius: inherit; overflow: hidden; transform-origin: left; background: linear-gradient(90deg, var(--ok), var(--accent)); animation: grow 1540ms cubic-bezier(.25,.1,.15,1) 350ms both; } .progress > b::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.65) 50%, transparent 65%); transform: translateX(-120%); animation: shine 3.4s ease-in-out 1.6s infinite; } @keyframes grow { from { transform: scaleX(0); } } /* ───────────── Calendario ───────────── */ .cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--cal-gap, 8px); } .dow { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--dim); padding: 2px 0 4px; } .day { position: relative; display: grid; place-items: center; min-height: 44px; width: 100%; aspect-ratio: var(--day-ar, 1 / 1.08); border-radius: var(--r-sm); font-family: var(--font-d); font-weight: 600; font-size: 15px; color: var(--text); background: var(--glass); border: var(--bw) solid var(--stroke); box-shadow: inset 0 1px 0 var(--hi); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform 315ms cubic-bezier(.2,.9,.3,1.6), background 210ms, box-shadow 280ms; } .day:hover { transform: translateY(-4px) scale(1.1); background: var(--glass-hi); z-index: 2; } .day:active { transform: scale(.94); } .day.empty { visibility: hidden; } .day.today { box-shadow: inset 0 1px 0 var(--hi), 0 0 0 2px var(--accent); } .day.today::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--accent); pointer-events: none; animation: ring 2.6s ease-out infinite; } @keyframes ring { 0% { transform: scale(.96); opacity: .9; } 100% { transform: scale(1.32); opacity: 0; } } .day.sel { background: var(--btn-bg); color: var(--on-accent); text-shadow: var(--btn-ts); border-color: rgba(255,255,255,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 14px 28px -10px var(--accent); transform: translateY(-2px) scale(1.06); } .day .dot { position: absolute; bottom: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: ping 2.4s ease-in-out infinite; } .day.sel .dot { background: var(--on-accent); box-shadow: 0 0 10px #fff; } @keyframes ping { 50% { scale: 1.6; opacity: .7; } } /* ───────────── Datos ───────────── */ .tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px 12px; text-align: center; } .tile .ic-wrap { width: 44px; height: 44px; border-radius: calc(var(--r-sm) + 2px); display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.5), transparent 50%), linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 20px -8px var(--accent); } .tile .ic-wrap.warm { background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.5), transparent 50%), linear-gradient(135deg, #ff7a45, #ffb02e); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 20px -8px #ff8a3d; } .tile .ic-wrap.green { background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.5), transparent 50%), linear-gradient(135deg, #12b981, #3ddc97); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 20px -8px #12b981; } .bars { display: grid; grid-template-columns: repeat(31, minmax(0, 1fr)); gap: 3px; align-items: end; height: var(--bars-h, 96px); position: relative; border-bottom: 1.5px solid var(--stroke); } .bars i { display: block; height: var(--h, 3%); min-height: 2px; border-radius: 5px 5px 2px 2px; transform-origin: bottom; background: linear-gradient(180deg, var(--accent2), var(--accent)); box-shadow: 0 0 14px -2px var(--accent); animation: barup 1120ms cubic-bezier(.25,.1,.15,1) both; animation-delay: calc(var(--k, 0) * 27ms + 385ms); } .bars i.z { background: var(--stroke); box-shadow: none; opacity: .6; } @keyframes barup { from { transform: scaleY(0); } } .goal { position: absolute; left: 0; right: 0; top: 0; border-top: 1.5px dashed var(--stroke); } .goal span { position: absolute; right: 0; top: -18px; font-size: 12px; color: var(--dim); } .meter { height: 12px; border-radius: 99px; background: var(--field); overflow: hidden; box-shadow: inset 0 2px 4px rgba(0,0,0,.2); } .meter > b { display: block; height: 100%; width: var(--p, 50%); border-radius: inherit; transform-origin: left; background: linear-gradient(90deg, var(--accent), var(--accent2)); box-shadow: 0 0 16px -2px var(--accent); animation: grow 1470ms cubic-bezier(.25,.1,.15,1) both; animation-delay: calc(var(--k, 0) * 119ms + 420ms); } .row-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px; border-radius: var(--r-sm); background: var(--glass); border: var(--bw) solid var(--stroke); box-shadow: inset 0 1px 0 var(--hi); transition: transform 315ms cubic-bezier(.2,.9,.3,1.4), background 210ms; } .row-item:hover { transform: translateX(4px); background: var(--glass-hi); } .acc { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 56px; padding: 0 16px; text-align: left; font-weight: 700; } .acc .chev { transition: transform 350ms cubic-bezier(.3,1.5,.5,1); } .acc.open .chev { transform: rotate(180deg); } .quote { font-style: italic; line-height: 1.55; } /* ───────────── Ejercicio ───────────── */ .ex { padding: 14px; display: flex; flex-direction: column; gap: 12px; } .ex .head { display: flex; align-items: center; gap: 12px; } .handle { width: 32px; height: 44px; display: grid; place-items: center; flex: none; color: var(--dim); border-radius: 12px; cursor: grab; } .thumb { width: 56px; height: 56px; border-radius: calc(var(--r-sm) + 2px); flex: none; display: grid; place-items: center; color: #fff; position: relative; overflow: hidden; background: radial-gradient(circle at 25% 15%, rgba(255,255,255,.55), transparent 50%), linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 22px -10px var(--accent); } .thumb.t2 { background: radial-gradient(circle at 25% 15%, rgba(255,255,255,.55), transparent 50%), linear-gradient(135deg, #12b981, var(--accent)); } .thumb.t3 { background: radial-gradient(circle at 25% 15%, rgba(255,255,255,.55), transparent 50%), linear-gradient(135deg, #ff7a45, var(--accent2)); } .thumb.t4 { background: radial-gradient(circle at 25% 15%, rgba(255,255,255,.55), transparent 50%), linear-gradient(135deg, var(--accent2), #ffb02e); } .ex .name { font-family: var(--font-d); font-weight: 600; font-size: 16px; line-height: 1.2; flex: 1 1 0; min-width: 0; position: relative; transition: color 280ms; } .ex.done .name { color: var(--dim); text-decoration: line-through; text-decoration-thickness: 2px; } .ex .sets { display: flex; align-items: center; gap: 10px; } .ex .stepper { width: 64px; text-align: center; padding: 0; } .ex .acts { display: flex; gap: 10px; } /* ───────────── Dock móvil + FAB ───────────── */ .scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; padding: 24px 16px 124px; scrollbar-width: none; } .scroll::-webkit-scrollbar { display: none; } .dock { position: absolute; left: 14px; right: 14px; bottom: 14px; height: 74px; padding: 0 6px; display: flex; align-items: center; justify-content: space-between; gap: 2px; border-radius: var(--r-lg); background: var(--glass-hi); z-index: 5; } .dock a { position: relative; isolation: isolate; flex: 1 1 0; min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 700; color: var(--dim); border-radius: var(--r-md); transition: color 210ms, transform 315ms cubic-bezier(.2,.9,.3,1.6); } .dock a:hover { transform: translateY(-3px); color: var(--text); } .dock a.on { color: var(--text); } .dock a.on::before { content: ""; position: absolute; inset: 4px 3px; z-index: -1; border-radius: var(--r-md); background: var(--glass); border: var(--bw) solid var(--stroke); box-shadow: inset 0 1px 0 var(--hi), 0 8px 18px -10px var(--accent); animation: popin 420ms cubic-bezier(.3,1.6,.5,1) both; } @keyframes popin { from { scale: .6; opacity: 0; } } .dock a.fab { flex: 0 0 62px; height: 62px; min-height: 62px; margin-top: -30px; border-radius: 50%; color: var(--on-accent); background: var(--btn-bg); text-shadow: var(--btn-ts); border: var(--bw) solid rgba(255,255,255,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 18px 32px -10px var(--accent), 0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent); animation: floaty 4.5s ease-in-out infinite; } .dock a.fab:hover { transform: translateY(-4px) scale(1.1) rotate(90deg); color: var(--on-accent); } .dock a.fab::before { display: none; } .assist { position: absolute; right: 16px; bottom: 100px; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; z-index: 4; color: #fff; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.6), transparent 50%), linear-gradient(135deg, var(--accent2), var(--accent)); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 16px 30px -10px var(--accent2); animation: floaty 5s ease-in-out infinite; } .assist::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--accent2); border-right-color: var(--accent); animation: spin 5s linear infinite; } .assist::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--accent2); opacity: 0; animation: ring 3s ease-out infinite; } @keyframes spin { to { rotate: 360deg; } } /* ───────────── Escritorio ───────────── */ .shell { display: flex; flex-wrap: wrap; gap: 20px; padding: 20px; align-items: stretch; } .side { flex: 0 0 252px; display: flex; flex-direction: column; gap: 6px; padding: 18px 14px; border-radius: var(--r-lg); position: sticky; top: 20px; align-self: flex-start; min-height: 600px; } .side .brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 18px; } .nav { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border-radius: var(--r-sm); font-weight: 600; color: var(--dim); position: relative; isolation: isolate; transition: transform 315ms cubic-bezier(.2,.9,.3,1.4), color 210ms; } .nav:hover { color: var(--text); transform: translateX(5px); } .nav.on { color: var(--text); } .nav.on::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--glass); border: var(--bw) solid var(--stroke); box-shadow: inset 0 1px 0 var(--hi), 0 10px 22px -12px var(--accent); animation: popin 420ms cubic-bezier(.3,1.6,.5,1) both; } .nav.on .ic { color: var(--accent); } .nav .pill { margin-left: auto; min-width: 26px; height: 22px; padding: 0 8px; display: grid; place-items: center; border-radius: 99px; font-size: 12px; font-weight: 800; background: var(--btn-bg); color: var(--on-accent); } .main { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 20px; } .grid-auto { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); } .split { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); align-items: start; } .sep { height: 1px; background: var(--stroke); border: 0; opacity: .8; margin: 6px 0; } @media (prefers-reduced-motion: reduce) { .bf *, .bf *::before, .bf *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; } } /* ───────────── Stats / reloj ───────────── */ .rg { fill: none; stroke-width: 14; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray: var(--C); stroke-dashoffset: var(--off); animation: rgf 1820ms cubic-bezier(.25,.1,.15,1) 350ms both; filter: drop-shadow(0 0 6px color-mix(in srgb, currentColor 55%, transparent)); } .rg.trk { stroke: var(--field); animation: none; filter: none; } @keyframes rgf { from { stroke-dashoffset: var(--C); } } .draw { stroke-dasharray: 1; stroke-dashoffset: 0; animation: dr 1540ms cubic-bezier(.3,.7,.2,1) 350ms both; } @keyframes dr { from { stroke-dashoffset: 1; } } .fadein { animation: fi 980ms ease 770ms both; } @keyframes fi { from { opacity: 0; } } .seg-rect { transform-origin: left center; animation: segin 630ms cubic-bezier(.2,.9,.3,1.1) both; animation-delay: calc(var(--k, 0) * 63ms + 350ms); } @keyframes segin { from { opacity: 0; transform: scaleX(0); } } .wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; height: 130px; } .wk div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; } .wk i { display: block; width: 100%; height: var(--h); min-height: 6px; border-radius: 10px 10px 4px 4px; transform-origin: bottom; background: linear-gradient(180deg, var(--accent2), var(--accent)); opacity: .75; animation: barup 1120ms cubic-bezier(.25,.1,.15,1) both; animation-delay: calc(var(--k, 0) * 66ms + 385ms); } .wk i.hot { opacity: 1; box-shadow: 0 0 18px -2px var(--accent); } .wk span { font-size: 12px; color: var(--dim); font-weight: 700; } .stack { display: flex; height: 16px; border-radius: 99px; overflow: hidden; background: var(--field); box-shadow: inset 0 2px 4px rgba(0,0,0,.2); } .stack b { display: block; height: 100%; width: var(--w); transform-origin: left; animation: grow 1330ms cubic-bezier(.25,.1,.15,1) both; animation-delay: calc(var(--k, 0) * 133ms + 385ms); } .legend { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--dim); } .legend::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); } .sample-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 12px; border-radius: 99px; font-size: 12px; font-weight: 700; color: var(--text); background: var(--glass); border: var(--bw) solid var(--stroke); } .sample-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); animation: ping 2s ease-in-out infinite; } .heart { animation: beat 1.1s ease-in-out infinite; transform-origin: center; color: #ff4d6d; } @keyframes beat { 0%, 100% { scale: 1; } 14% { scale: 1.22; } 28% { scale: 1; } 42% { scale: 1.14; } } /* ───────────── Modo entreno: series rápidas ───────────── */ .xrow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px; text-align: left; } .xrow .name { flex: 1 1 0; min-width: 0; font-family: var(--font-d); font-weight: 600; font-size: 15px; line-height: 1.2; } .xrow .sub { font-size: 12px; color: var(--dim); margin-top: 3px; font-weight: 500; } .dots { display: flex; gap: 4px; } .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--field); border: var(--bw) solid var(--stroke); } .dots i.d { background: var(--ok); border-color: transparent; box-shadow: 0 0 8px var(--ok); } .chk { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--ok), var(--accent)); color: #fff; box-shadow: 0 6px 14px -6px var(--ok); } .chk-btn { cursor: pointer; transition: transform 140ms; } .chk-btn:active { transform: scale(.88); } .ex .chk.off { background: transparent !important; color: var(--dim); border: 2px solid var(--stroke); box-shadow: none !important; } .setrow { display: flex; align-items: center; gap: 8px; } .setrow .colhead { flex: 1 1 0; min-width: 0; text-align: center; } .step { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 4px; border-radius: var(--r-sm); background: var(--field); border: var(--bw) solid var(--stroke); box-shadow: inset 0 2px 6px rgba(0,0,0,.16); } .step button { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: calc(var(--r-sm) - 2px); background: var(--glass); border: var(--bw) solid var(--stroke); box-shadow: inset 0 1px 0 var(--hi); transition: transform 210ms cubic-bezier(.2,.9,.3,1.6); } .step button:active { transform: scale(.88); } /* Edición a mano del número: ancho 0 + flex (sin tamaño intrínseco del input, que ensanchaba el cuadro) y alto fijo. */ .step .bfx-stepin { flex: 1 1 0; width: 0; min-width: 0; height: 44px; margin: 0; padding: 0; text-align: center; border: 0; border-radius: 0; background: transparent; outline: none; box-shadow: none; font: inherit; font-family: var(--font-d); font-weight: 700; font-size: 20px; font-variant-numeric: tabular-nums; color: inherit; -webkit-appearance: none; appearance: none; } .step output { flex: 1 1 0; min-width: 0; text-align: center; font-family: var(--font-d); font-weight: 700; font-size: 20px; font-variant-numeric: tabular-nums; cursor: text; } .setchk { width: 56px; height: 56px; flex: none; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-d); font-weight: 700; font-size: 17px; background: var(--glass); border: var(--bw) solid var(--stroke); box-shadow: inset 0 1px 0 var(--hi); transition: transform 280ms cubic-bezier(.3,1.6,.5,1), background 210ms; } .setchk:active { transform: scale(.88); } .setchk.on { background: linear-gradient(135deg, var(--ok), var(--accent)); color: #fff; border-color: rgba(255,255,255,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 20px -8px var(--ok); } .setrow.done .step { opacity: .55; } .rest { display: flex; align-items: center; gap: 12px; padding: 10px 12px; } .rest svg.rg-wrap { flex: none; } /* iconos: no dependen de la clase (respaldo por atributo) */ .bf svg[viewBox="0 0 24 24"] { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; display: block; max-width: 100%; overflow: hidden; } .bf .icon-btn svg, .bf .chip svg, .bf .btn svg { flex: none; } .bf .btn > *, .bf .chip > * { min-width: 0; } .seg .chip { padding: 0 12px; } .xrow, .row-item { padding-left: 16px; padding-right: 16px; } /* ════════════════════════════════════════════════════════════════ Temas con estilo propio (sin liquid glass): kde · xp · frutiger · aqua Midnight, hyperos y oneui conservan el cristal líquido. ════════════════════════════════════════════════════════════════ */ @keyframes stripes { to { background-position: 22.6px 0; } } /* ── Base compartida: superficies sólidas y controles "de plataforma" ── */ .bf:is([data-theme="kde"], [data-theme="xp"], [data-theme="aqua"], [data-theme="frutiger"]) { --blur: 0px; --gsat: 100%; & .glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--panel-bg, var(--glass)); border: var(--bw) solid var(--stroke); box-shadow: var(--panel-shadow, none); border-radius: var(--r-md); } & .glass::after { display: none; } /* Brillo gel: cubre TODO el control (misma forma exacta) con el degradado pintado solo en la mitad de arriba. Antes era una caja de media altura con el mismo radio → en botones redondos y el dock asomaba como una "tapa" aparte. */ & .glass::before { inset: 0; border-radius: inherit; background: var(--gloss-bg, none) top / 100% 52% no-repeat; opacity: 1; } & .glass.strong { background: var(--panel-bg-strong, var(--panel-bg, var(--glass-hi))); } & :is(.btn:not(.primary), .chip:not(.on), .icon-btn:not(.primary), .day:not(.sel), .step button, .setchk:not(.on)) { background: var(--sec-bg); color: var(--text); border: var(--bw) solid var(--sec-border); box-shadow: var(--sec-shadow, none); text-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } & :is(.btn:not(.primary):hover, .chip:not(.on):hover, .icon-btn:not(.primary):hover, .day:not(.sel):hover) { border-color: var(--hover-border); box-shadow: var(--hover-shadow, var(--sec-shadow, none)); background: var(--sec-bg-hover, var(--sec-bg)); } & :is(.btn.primary, .chip.on, .day.sel, .icon-btn.primary, .setchk.on) { background: var(--btn-bg); color: var(--on-accent); border: var(--bw) solid var(--pri-border); text-shadow: var(--btn-ts); box-shadow: var(--pri-shadow, none); } & .setchk.on { background: var(--ok-bg, var(--ok)); border-color: var(--ok-border, var(--ok)); } & .btn.primary::after { display: var(--pri-shine, none); } & .seg { background: var(--seg-bg, var(--field)); box-shadow: none; } & .seg .chip:not(.on) { background: transparent; border-color: transparent; box-shadow: none; } & .field { box-shadow: var(--field-shadow, none); } & .row-item { background: var(--panel-bg, var(--glass)); box-shadow: none; } & .tile .ic-wrap, & .thumb, & .avatar { box-shadow: none; } & .badge { box-shadow: none; animation: none; background: var(--badge-bg, var(--btn-bg)); color: #fff; } & .assist { box-shadow: none; animation: none; background: var(--btn-bg); } & .assist::before, & .assist::after { display: none; } & .dock a.fab { animation: none; } & .dock a.on::before { box-shadow: none; } & .nav.on::before { box-shadow: none; } & .day.today::after { border-color: var(--accent); } & .day .dot { box-shadow: none; animation: none; } & .progress > b { background: var(--bar-bg, linear-gradient(90deg, var(--ok), var(--accent))); } & .progress > b::after { display: none; } & .meter > b, & .bars i, & .wk i { box-shadow: none; } & .chk { box-shadow: none; } & .rg { filter: none; } } /* ── KDE · Breeze Dark: plano, sobrio, rectángulos de 5 px, sin brillo ── */ .bf[data-theme="kde"] { --font-d: 'Noto Sans', 'DM Sans', system-ui, sans-serif; --font-b: 'Noto Sans', 'DM Sans', system-ui, sans-serif; --bg: #1b1e20; --glass: #2a2e32; --glass-hi: #31363b; --field: #1d2023; --stroke: #41474d; --bw: 1px; --hi: transparent; --lo: transparent; --sweep: transparent; --text: #eff0f1; --dim: #a1a9b1; --text-bg: #eff0f1; --text-bg-shadow: none; --accent: #3daee9; --accent2: #3daee9; --on-accent: #0b1c26; --ok: #27ae60; --btn-bg: #3daee9; --gloss: 0; --btn-ts: none; --r-lg: 8px; --r-md: 6px; --r-sm: 5px; --r-pill: 5px; --panel-bg: #2a2e32; --sec-bg: linear-gradient(#383e44, #31363b); --sec-border: #4d545b; --hover-border: #3daee9; --pri-border: #3daee9; --badge-bg: #da4453; & .bg i { display: none; } & .rise { animation-duration: 245ms; } & :is(.btn, .chip, .icon-btn, .day, .glass.live, .nav, .row-item, .dock a, .tile):hover { transform: none; } & .glass.live:hover { border-color: var(--accent); } & .day.sel { transform: none; } & .toggle { border-radius: 5px; background: #1d2023; box-shadow: none; } & .toggle::after { border-radius: 3px; background: #eff0f1; box-shadow: none; } & .toggle.on { background: #3daee9; } & .progress, & .meter, & .stack { border-radius: 3px; box-shadow: none; } & .progress > b, & .meter > b { border-radius: 2px; background: #3daee9; } & .bars i, & .wk i { background: #3daee9; border-radius: 3px 3px 0 0; } & .dock { background: #232629; border: 1px solid #41474d; border-radius: 8px; box-shadow: none; } & .dock a.on::before { background: rgba(61,174,233,.18); border: 0; border-bottom: 2px solid #3daee9; border-radius: 5px; } & .dock a.fab { background: #3daee9; color: #0b1c26; border: 0; } & .side { background: #232629; } & .nav.on::before { background: rgba(61,174,233,.16); border: 0; } & .avatar, & .thumb, & .tile .ic-wrap { background: #3daee9; border-radius: 5px; } & .thumb.t2, & .tile .ic-wrap.green { background: #27ae60; } & .thumb.t3, & .tile .ic-wrap.warm { background: #f67400; } & .thumb.t4 { background: #da4453; } & .chk, & .setchk.on { background: #27ae60; } & .btn.primary::before { display: none; } & .slider { border-radius: 3px; height: 6px; } & .slider::-webkit-slider-thumb { border-radius: 4px; width: 20px; height: 20px; background: #eff0f1; box-shadow: none; border-color: #3daee9; } } /* ── XP · Luna: beige, botones con relieve, selección azul, barra de tareas ── */ .bf[data-theme="xp"] { --font-d: Tahoma, 'Segoe UI', Verdana, sans-serif; --font-b: Tahoma, 'Segoe UI', Verdana, sans-serif; --bg: linear-gradient(180deg, #2f6fdc 0%, #6aa5f0 36%, #b8dcff 49%, #79bd45 50%, #4a9a2a 76%, #357a1c 100%); --o1: #fff; --o2: #fff; --o3: #fff; --orb-o: .5; --orb-blur: 16px; --glass: #f4f2e8; --glass-hi: #ece9d8; --field: #fff; --stroke: #8fa6cf; --bw: 1px; --hi: rgba(255,255,255,.9); --lo: rgba(0,0,0,.05); --text: #111; --dim: #4b4b44; --text-bg: #fff; --text-bg-shadow: 0 1px 2px rgba(0,30,100,.85); --accent: #316ac5; --accent2: #3c9a1e; --on-accent: #fff; --ok: #2e8b1a; --btn-bg: linear-gradient(#78d864, #3aa028 52%, #2a8a1a); --gloss: .45; --btn-ts: 0 1px 1px rgba(0,60,0,.6); --r-lg: 9px; --r-md: 7px; --r-sm: 4px; --r-pill: 4px; --panel-bg: #f4f2e8; --panel-shadow: 0 3px 8px rgba(0,30,110,.35); --sec-bg: linear-gradient(#fff, #f1efe4 50%, #dcd8c4); --sec-border: #003c74; --hover-border: #003c74; --hover-shadow: inset 0 0 0 2px #f8b330; --sec-shadow: inset 0 0 0 1px rgba(255,255,255,.9); --pri-border: #1d5c10; --pri-shadow: inset 0 1px 0 rgba(255,255,255,.55); --badge-bg: #e5382a; --seg-bg: #ece9d8; --field-shadow: inset 1px 1px 2px rgba(0,0,0,.15); --bar-bg: repeating-linear-gradient(90deg, #37c32f 0 8px, transparent 8px 10px); & :is(.btn, .chip, .icon-btn, .day, .glass.live, .nav, .row-item, .dock a, .tile):hover { transform: none; } & .chip.on, & .day.sel { background: #316ac5; border-color: #1b4a9a; text-shadow: none; box-shadow: none; transform: none; } & .seg { border: 1px solid #919b9c; } & .field { border-color: #7f9db9; border-radius: 2px; } & .glass { box-shadow: var(--panel-shadow), inset 0 0 0 1px #fff; } & .progress { background: #fff; border: 1px solid #8e8f8f; border-radius: 3px; box-shadow: none; } & .progress > b { border-radius: 0; } & .meter, & .stack { background: #fff; border: 1px solid #8e8f8f; border-radius: 3px; box-shadow: none; } & .meter > b { border-radius: 0; background: repeating-linear-gradient(90deg, #37c32f 0 8px, transparent 8px 10px); box-shadow: none; } & .toggle { border-radius: 4px; background: #fff; border-color: #7f9db9; box-shadow: none; } & .toggle::after { border-radius: 3px; background: linear-gradient(#fff, #d6d0c0); border: 1px solid #003c74; box-shadow: none; } & .toggle.on { background: linear-gradient(#78d864, #3aa028); } & .avatar { border-radius: 5px; border: 2px solid #fff; background: linear-gradient(#5b9bf0, #245edb); } & .thumb, & .tile .ic-wrap { border-radius: 5px; border: 1px solid #003c74; background: linear-gradient(#6aa8f5, #245edb); } & .thumb.t2, & .tile .ic-wrap.green { background: linear-gradient(#78d864, #2a8a1a); } & .thumb.t3, & .tile .ic-wrap.warm { background: linear-gradient(#ffb44d, #e0770f); } & .thumb.t4 { background: linear-gradient(#ee7a6e, #c4291b); } /* .dock también es .glass.strong: sin el doble selector, el panel beige claro le ganaba al azul (texto blanco ilegible). */ & .dock, & .dock.glass.strong { left: 0; right: 0; bottom: 0; height: 66px; border-radius: 0; border: 0; border-top: 1px solid #0b3a9e; box-shadow: none; padding: 0 6px; background: linear-gradient(180deg, #3d8bf5 0%, #245edb 14%, #245edb 82%, #1941a5 100%); } & .dock a { color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.5); border-radius: 4px; } & .dock a.on { background: #1b4fc2; box-shadow: inset 1px 1px 3px rgba(0,0,50,.6); } & .dock a.on::before { display: none; } & .dock a.fab { margin-top: -16px; border: 2px solid #fff; box-shadow: 0 4px 10px rgba(0,40,0,.5); background: radial-gradient(circle at 30% 25%, #9be67e, #2f9d1f 62%, #1f7a12); color: #fff; } & .side.glass.strong, & .side { --text: #fff; --dim: #dce8ff; background: linear-gradient(180deg, #7ba2e7, #6375d6); border: 1px solid #0b3a9e; } & .side .nav.on::before { background: rgba(255,255,255,.28); border: 0; } & .side .avatar { border-color: #fff; } & .side .nav.on .ic { color: #fff; } & .assist { border: 2px solid #fff; background: radial-gradient(circle at 30% 25%, #8fb8f7, #245edb); } & .setchk.on, & .chk { background: linear-gradient(#78d864, #2a8a1a); } } /* ── Frutiger Aero: gel brillante, burbujas, cielo y pasto ── */ .bf[data-theme="frutiger"] { --bg: linear-gradient(180deg, #38a8ee 0%, #8fd3fb 36%, #d6f3ff 62%, #c7f0a0 84%, #80d04a 100%); --glass: rgba(255,255,255,.85); --glass-hi: #fff; --field: #eef9ff; --stroke: rgba(0,120,190,.4); --bw: 1px; --hi: #fff; --lo: rgba(0,130,200,.12); --text: #073b5c; --dim: rgba(7,59,92,.74); --text-bg: #073b5c; --text-bg-shadow: 0 1px 0 rgba(255,255,255,.7); --accent: #1b8fe8; --accent2: #35c4a0; --on-accent: #fff; --ok: #2e9e3a; --btn-bg: linear-gradient(180deg, #7fdcff 0%, #2aa7ef 50%, #0a86d8 51%, #35c1ff 100%); --gloss: 1; --btn-ts: 0 -1px 0 rgba(0,70,130,.5); --r-lg: 26px; --r-md: 20px; --r-sm: 14px; --r-pill: 999px; --panel-bg: linear-gradient(180deg, #fff, #e4f5ff); --panel-shadow: 0 10px 22px -8px rgba(0,90,150,.5), inset 0 1px 0 #fff; --gloss-bg: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0)); --sec-bg: linear-gradient(180deg, #fff 0%, #e3f4ff 50%, #c6e8fb 51%, #e8f7ff 100%); --sec-border: rgba(0,110,180,.55); --sec-shadow: inset 0 1px 0 #fff, 0 4px 8px -4px rgba(0,90,150,.45); --hover-border: #0a86d8; --hover-shadow: 0 0 0 3px rgba(53,193,255,.45), inset 0 1px 0 #fff; --pri-border: #0a6fb5; --pri-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -6px 10px -6px rgba(255,255,255,.5), 0 6px 12px -4px rgba(10,134,216,.6); --pri-shine: block; --ok-bg: linear-gradient(180deg, #b6ee6a, #4fc22c 50%, #3aa81c 51%, #7fdc4a); --ok-border: #2e8a16; --badge-bg: linear-gradient(#ff9c6a, #e9531f); --bar-bg: linear-gradient(180deg, #c3f27d, #4fc22c 50%, #3aa81c 51%, #7fdc4a); --seg-bg: rgba(7,100,160,.14); & .bg i { filter: none; opacity: .75; border: 1.5px solid rgba(255,255,255,.8); right: auto; bottom: auto; height: auto; background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.95) 0, rgba(255,255,255,.4) 16%, rgba(170,225,255,.2) 55%, rgba(255,255,255,.06) 100%); box-shadow: inset 0 -12px 30px rgba(60,170,255,.3), 0 0 40px rgba(255,255,255,.45); } & .bg i:nth-child(1) { width: 230px; left: 6%; top: 8%; } & .bg i:nth-child(2) { width: 150px; left: auto; right: 7%; top: 38%; } & .bg i:nth-child(3) { width: 320px; left: 52%; top: auto; bottom: -6%; } & .day.sel { box-shadow: var(--pri-shadow); transform: translateY(-2px); } & .chip.on { box-shadow: var(--pri-shadow); } & .toggle { background: rgba(7,100,160,.2); } & .toggle.on { background: linear-gradient(180deg, #b6ee6a, #4fc22c 50%, #3aa81c 51%, #7fdc4a); } & .progress > b { background: var(--bar-bg); } & .meter > b, & .bars i, & .wk i { background: linear-gradient(180deg, #7fdcff, #1b8fe8); } & .avatar, & .thumb, & .tile .ic-wrap { background: var(--btn-bg); border: 1px solid #0a6fb5; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); } & .thumb.t2, & .tile .ic-wrap.green { background: linear-gradient(180deg, #c3f27d, #4fc22c 50%, #3aa81c 51%, #7fdc4a); border-color: #2e8a16; } & .thumb.t3, & .tile .ic-wrap.warm { background: linear-gradient(180deg, #ffd48a, #ff9a2e 50%, #f07c12 51%, #ffb552); border-color: #c46310; } & .thumb.t4 { background: linear-gradient(180deg, #ffa7a0, #f0584a 50%, #d93a2b 51%, #ff8a7c); border-color: #a82a1d; } & .dock { background: linear-gradient(180deg, #fff, #d9f0ff); box-shadow: 0 10px 24px -8px rgba(0,90,150,.55), inset 0 1px 0 #fff; border-radius: 34px; } & .dock a.on::before { background: linear-gradient(180deg, #fff, #cdeaff); border: 1px solid rgba(0,110,180,.5); } & .dock a.fab { background: var(--btn-bg); border: 1px solid #0a6fb5; box-shadow: var(--pri-shadow), 0 0 0 5px rgba(255,255,255,.55); } & .side { border-radius: 30px; } & .nav.on::before { background: linear-gradient(180deg, #fff, #cdeaff); border: 1px solid rgba(0,110,180,.5); } } /* ── Aqua: rayas, paneles cepillados, botones gel y barra de progreso a rayas ── */ .bf[data-theme="aqua"] { --font-d: 'Lucida Grande', 'Lucida Sans Unicode', 'DM Sans', system-ui, sans-serif; --font-b: 'Lucida Grande', 'Lucida Sans Unicode', 'DM Sans', system-ui, sans-serif; --bg: repeating-linear-gradient(0deg, #e8e8ec 0 2px, #f6f6f8 2px 4px); --glass: #f4f4f6; --glass-hi: #fafafa; --field: #fff; --stroke: #a4a4ac; --bw: 1px; --hi: #fff; --lo: rgba(0,0,0,.05); --text: #1b1b1f; --dim: #5f6068; --text-bg: #1b1b1f; --text-bg-shadow: 0 1px 0 rgba(255,255,255,.9); --accent: #2f78e0; --accent2: #5aa8f5; --on-accent: #fff; --ok: #2a9d3f; --btn-bg: linear-gradient(180deg, #cde3fb 0%, #7fb2ef 49%, #3d85e6 50%, #79b6f7 100%); --gloss: 1; --btn-ts: 0 -1px 0 rgba(0,40,110,.55); --r-lg: 14px; --r-md: 10px; --r-sm: 8px; --r-pill: 999px; --panel-bg: linear-gradient(180deg, #fff, #ececef); --panel-shadow: 0 1px 3px rgba(0,0,0,.3), 0 8px 18px -10px rgba(0,0,0,.3), inset 0 1px 0 #fff; --sec-bg: linear-gradient(180deg, #fff 0%, #e6e6ea 49%, #cfcfd5 50%, #ededf0 100%); --sec-border: #8e8e96; --sec-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,.25); --hover-border: #2f78e0; --hover-shadow: 0 0 0 3px rgba(61,133,230,.35), inset 0 1px 0 #fff; --pri-border: #2b5fa8; --pri-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 1px 3px rgba(0,30,90,.45); --badge-bg: linear-gradient(#ff8f86, #d8332a); --seg-bg: #dcdce2; --field-shadow: inset 0 1px 3px rgba(0,0,0,.25); & .bg i { display: none; } & .btn.primary { animation: aquapulse 2.4s ease-in-out infinite; } & .progress { background: #fff; box-shadow: inset 0 1px 3px rgba(0,0,0,.3); border-color: #8e8e96; } & .progress > b { background: repeating-linear-gradient(135deg, #4d98ee 0 8px, #8cc0fa 8px 16px); background-size: 22.6px 22.6px; animation: grow 2.2s cubic-bezier(.25,.1,.15,1) .5s both, stripes 1s linear infinite; } & .meter > b, & .bars i, & .wk i { background: linear-gradient(180deg, #8cc0fa, #2f78e0); } & .toggle { background: #d4d4da; box-shadow: inset 0 1px 3px rgba(0,0,0,.3); } & .toggle::after { background: linear-gradient(#fff, #d6d6dc); border: 1px solid #8e8e96; box-shadow: 0 1px 2px rgba(0,0,0,.3); } & .toggle.on { background: var(--btn-bg); } & .avatar, & .thumb, & .tile .ic-wrap { background: var(--btn-bg); border: 1px solid #2b5fa8; box-shadow: inset 0 1px 0 rgba(255,255,255,.85); } & .thumb.t2, & .tile .ic-wrap.green { background: linear-gradient(180deg, #c9f0cf, #6fcf86 49%, #33a550 50%, #7fd896); border-color: #25803b; } & .thumb.t3, & .tile .ic-wrap.warm { background: linear-gradient(180deg, #ffe0b0, #ffb15a 49%, #f08a1e 50%, #ffc070); border-color: #bf6a12; } & .thumb.t4 { background: linear-gradient(180deg, #ffd0cc, #f08a82 49%, #d8453b 50%, #f4a099); border-color: #a82a21; } & .dock { background: linear-gradient(180deg, #fbfbfc, #d3d3da); border-radius: 18px; box-shadow: 0 8px 20px -8px rgba(0,0,0,.45), inset 0 1px 0 #fff; } & .dock a.on::before { background: var(--btn-bg); border: 1px solid #2b5fa8; border-radius: 12px; } & .dock a.on { color: #fff; text-shadow: var(--btn-ts); } & .dock a.fab { background: var(--btn-bg); border: 1px solid #2b5fa8; box-shadow: var(--pri-shadow); } & .side { background: linear-gradient(180deg, #f2f2f5, #dadadf); } & .nav.on { color: #fff; text-shadow: var(--btn-ts); } & .nav.on .ic { color: #fff; } & .nav.on::before { background: var(--btn-bg); border: 1px solid #2b5fa8; } } @keyframes aquapulse { 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 0 0 4px rgba(61,133,230,.35), 0 1px 3px rgba(0,30,90,.45); } } /* ── HyperOS: fondo vivo oscuro, tarjetas esmeriladas grises, esquinas muy redondas, botones circulares tipo centro de control (referencia: pantalla de bloqueo y panel de HyperOS) ── */ .bf[data-theme="hyperos"] { --bg: radial-gradient(130% 90% at 50% 0%, #0d2a22 0%, #050a0b 62%); --o1: #19d27a; --o2: #0b8f86; --o3: #2b6bff; --orb-o: .78; --orb-blur: 34px; --glass: rgba(255,255,255,.13); --glass-hi: rgba(70,76,80,.62); --field: rgba(0,0,0,.30); --stroke: rgba(255,255,255,.14); --bw: 1px; --hi: rgba(255,255,255,.22); --lo: rgba(255,255,255,.03); --sweep: rgba(255,255,255,.18); --shadow: 0 18px 40px -22px rgba(0,0,0,.8); --text: #f5f7f6; --dim: rgba(235,242,240,.68); --text-bg: #f5f7f6; --text-bg-shadow: none; --accent: #3d8bff; --accent2: #1fd6a0; --on-accent: #fff; --ok: #3ddc84; --btn-bg: linear-gradient(180deg, #4b95ff, #2f6ff0); --gloss: .12; --btn-ts: none; --r-lg: 32px; --r-md: 26px; --r-sm: 18px; --r-pill: 999px; --blur: 42px; --gsat: 170%; & .glass.strong { background: rgba(60,66,70,.55); } & .icon-btn { border-radius: 50%; } & .icon-btn:not(.primary) { background: rgba(255,255,255,.16); } & .icon-btn:hover { transform: scale(1.08); } & .chip.on, & .day.sel { box-shadow: 0 10px 24px -12px #3d8bff; } & .day:not(.sel) { border-radius: 18px; background: rgba(255,255,255,.12); } & .day.sel { border-radius: 18px; } & .day.today::after { border-radius: 18px; } & .toggle.on { background: linear-gradient(180deg, #4b95ff, #2f6ff0); } & .progress > b, & .meter > b { background: linear-gradient(90deg, #1fd6a0, #3d8bff); } & .thumb, & .avatar, & .tile .ic-wrap { border-radius: 22px; } & .avatar { border-radius: 50%; } & .dock { border-radius: 36px; background: rgba(60,66,70,.5); } & .dock a.on::before { border-radius: 26px; background: rgba(255,255,255,.2); } & .nav.on::before { background: rgba(255,255,255,.18); } } /* ───────────── Levantamiento: planes leídos por OCR ───────────── */ .scheme { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; border: var(--bw) solid var(--stroke); background: var(--glass); color: var(--text); } .scheme::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; } .scheme.pr { color: var(--accent); } .scheme.kg { color: var(--ok); } .scheme.bw { color: var(--dim); } .conf { display: inline-flex; gap: 3px; align-items: flex-end; } .conf i { width: 5px; height: 12px; border-radius: 2px; background: var(--stroke); } .conf i:nth-child(1) { height: 8px; } .conf i:nth-child(2) { height: 10px; } .conf i.on { background: var(--ok); } .conf.mid i.on { background: #ffb454; } .raw { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 14px; line-height: 1.8; padding: 10px 14px; border-radius: var(--r-sm); background: var(--field); border: var(--bw) solid var(--stroke); white-space: pre-wrap; word-break: break-word; } .tok { padding: 2px 4px; border-radius: 6px; } .tok.ok { background: color-mix(in srgb, var(--accent) 16%, transparent); } .tok.warn { background: rgba(255,180,84,.25); box-shadow: inset 0 -2px 0 #ffb454; animation: warnpulse 2s ease-in-out infinite; } @keyframes warnpulse { 50% { background: rgba(255,180,84,.45); } } .review { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: var(--r-sm); background: rgba(255,180,84,.14); border: var(--bw) solid rgba(255,180,84,.55); } .lad { display: flex; flex-direction: column; gap: 6px; } .lrow { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 6px 12px 6px 6px; border-radius: var(--r-sm); background: var(--glass); border: var(--bw) solid var(--stroke); box-shadow: inset 0 1px 0 var(--hi); transition: opacity 210ms; } .lrow.done { opacity: .62; } .lrow .setchk { width: 44px; height: 44px; font-size: 15px; } .lrow .pct { font-family: var(--font-d); font-weight: 700; font-size: 13px; color: var(--dim); width: 40px; text-align: center; flex: none; } .lrow .kg { flex: 1 1 0; min-width: 0; font-family: var(--font-d); font-weight: 700; font-size: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; } .lrow .kg small { font-size: 12px; color: var(--dim); font-weight: 600; margin-left: 4px; } .lrow .kg.warn { color: #ffb454; } .lrow .reps { font-family: var(--font-d); font-weight: 700; font-size: 16px; white-space: nowrap; } .lrow .reps small { font-size: 12px; color: var(--dim); font-weight: 600; } .lock { color: var(--accent); } .board { position: relative; overflow: hidden; border-radius: var(--r-md); padding: 18px 16px; color: #eaf2ee; background: linear-gradient(160deg, #22372f, #15221e); border: var(--bw) solid var(--stroke); font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 15px; line-height: 2; letter-spacing: .02em; } .board::after { content: ""; position: absolute; left: 0; right: 0; top: -70px; height: 70px; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(61,220,151,.38), transparent); animation: scan 3.4s ease-in-out infinite; } @keyframes scan { to { top: 100%; } } .board .box { outline: 2px solid #3ddc97; outline-offset: 3px; border-radius: 4px; } .board .box.w { outline-color: #ffb454; } .media { position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 16 / 10; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 25% 20%, rgba(255,255,255,.35), transparent 45%), linear-gradient(135deg, #3a4a55, #1e2830); border: var(--bw) solid var(--stroke); } .media .play { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.5); } .media .len { position: absolute; right: 10px; bottom: 10px; padding: 2px 10px; border-radius: 99px; background: rgba(0,0,0,.55); font-size: 12px; font-weight: 700; } /* ════════════════════════════════════════════════════════════════ Adaptación a la app real (no está en el mockup) El mockup es un lienzo fijo con .scroll absoluto; la app scrollea el documento. ════════════════════════════════════════════════════════════════ */ html.bf-page, html.bf-page body { margin: 0; min-height: 100%; } html.bf-page body { background: transparent; } /* Pull-to-refresh propio (BfPullRefresh): apaga el nativo de Chrome, que pedía un jalón muy largo. */ html.bf-page { overscroll-behavior-y: contain; } .bfx-ptr { position: fixed; top: calc(var(--sat, env(safe-area-inset-top)) + 8px); left: 50%; z-index: 9999; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #111; box-shadow: 0 4px 14px rgba(0,0,0,.25); pointer-events: none; } /* overflow: clip (no hidden) para no crear un scroll container: si no, position: sticky de la sidebar de escritorio deja de funcionar. */ /* Escala global (Victor: "todo se ve gigante"). Debe coincidir con BF_ZOOM en index.html. Las alturas en vh quedan dentro del zoom, así que se dividen por la escala para seguir cubriendo la pantalla. */ .bf.bf-app { --bfz: .88; zoom: var(--bfz); min-height: calc(100vh / var(--bfz)); min-height: calc(100dvh / var(--bfz)); overflow: clip; } /* min-h-screen dentro del zoom quedaba en el 88 % del alto (carga y login centrados arriba, hueco abajo). */ .bf.bf-app .min-h-screen { min-height: calc(100dvh / var(--bfz)); } .bf.bf-app > .bg { position: fixed; } /* Bug conocido de Chromium (ver AGENTS.md): un backdrop-filter dentro de otro elemento que ya tiene backdrop-filter se pinta como un parche blanco opaco. Solo el contenedor exterior blurea. */ .bf .glass :is(.glass, .day, .btn, .chip, .seg) { -webkit-backdrop-filter: none; backdrop-filter: none; } /* ── Estructura: móvil (dock) vs escritorio (sidebar) ── */ .bfx-shell { position: relative; } .bfx-main { min-width: 0; padding: 20px 16px calc(124px + var(--sab, env(safe-area-inset-bottom))); max-width: 640px; margin: 0 auto; } .bfx-side { display: none; } .bf.bf-app .dock { position: fixed; bottom: calc(14px + var(--sab, env(safe-area-inset-bottom))); max-width: 560px; margin: 0 auto; } .bf.bf-app[data-theme="xp"] .dock { bottom: 0; height: calc(66px + var(--sab, env(safe-area-inset-bottom))); padding-bottom: var(--sab, env(safe-area-inset-bottom)); max-width: none; } .bf.bf-app .assist { position: fixed; bottom: calc(100px + var(--sab, env(safe-area-inset-bottom))); } .bf.bf-app .assist .badge { top: -4px; right: -4px; } .dock a { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; } @media (min-width: 1024px) { .bfx-shell { display: flex; gap: 20px; padding: 20px; align-items: flex-start; max-width: 1560px; margin: 0 auto; } .bfx-side { display: flex; flex: 0 0 252px; flex-direction: column; gap: 6px; padding: 18px 14px; border-radius: var(--r-lg); position: sticky; top: 20px; min-height: 600px; max-height: calc(100vh - 40px); overflow-y: auto; scrollbar-width: none; } .bfx-main { flex: 1 1 0; max-width: none; margin: 0; padding: 0 0 40px; } .bf.bf-app .dock, .bf.bf-app .assist { display: none; } } .bfx-side .brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 18px; min-width: 0; } .bfx-side .nav { width: 100%; text-align: left; } .bfx-side .nav span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .swatches { display: grid; grid-template-columns: repeat(4, 44px); gap: 10px; padding: 0 8px; } .swatch { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--stroke); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); transition: transform 280ms cubic-bezier(.2,.9,.3,1.6); position: relative; } .swatch:hover { transform: scale(1.1); } .swatch.on { box-shadow: 0 0 0 3px var(--accent); } .swatch.on::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.5); } /* ── Hoja inferior (modal) y toast ── */ .bfx-layer { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; } .bfx-scrim { position: absolute; inset: 0; background: rgba(0,0,10,.45); animation: fi 210ms ease both; } .bfx-sheet { position: relative; width: 100%; max-width: 560px; max-height: min(86vh, 860px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 10px 16px calc(24px + var(--sab, env(safe-area-inset-bottom))); animation: sheetup 350ms cubic-bezier(.2,.9,.25,1.05) both; } .bfx-sheet::-webkit-scrollbar { display: none; } .bfx-sheet .grab { width: 44px; height: 5px; border-radius: 99px; background: var(--stroke); margin: 0 auto 12px; } @keyframes sheetup { from { translate: 0 100%; } } @media (min-width: 1024px) { .bfx-layer { align-items: center; } .bfx-sheet { border-radius: var(--r-lg); max-width: 620px; padding-bottom: 24px; animation-name: sheetpop; } .bfx-sheet .grab { display: none; } } @keyframes sheetpop { from { opacity: 0; scale: .94; translate: 0 16px; } } .bfx-toast { position: fixed; left: 50%; translate: -50% 0; bottom: calc(104px + var(--sab, env(safe-area-inset-bottom))); z-index: 70; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 18px; border-radius: var(--r-pill); max-width: calc(100vw - 32px); animation: toastin 350ms cubic-bezier(.2,.9,.3,1.3) both; } @keyframes toastin { from { opacity: 0; translate: -50% 20px; } } @media (min-width: 1024px) { .bfx-toast { bottom: 28px; } } /* ── Piezas sueltas ── */ .bfx-spin { animation: spin 1s linear infinite; } .bfx-skel { border-radius: var(--r-md); background: var(--glass); border: var(--bw) solid var(--stroke); position: relative; overflow: hidden; } .bfx-skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, var(--sweep) 50%, transparent 70%); animation: skel 1.4s ease-in-out infinite; } @keyframes skel { from { translate: -100% 0; } to { translate: 100% 0; } } .bfx-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 28px 16px; color: var(--dim); } .bfx-empty .ic-wrap { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--field); border: var(--bw) solid var(--stroke); color: var(--accent); } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tnum { font-variant-numeric: tabular-nums; } .err { color: #ff7b8a; } .bf:is([data-theme="frutiger"], [data-theme="oneui"], [data-theme="aqua"], [data-theme="xp"]) .err { color: #c01f3a; } .day .bfx-dotrow { position: absolute; bottom: 6px; left: 0; right: 0; display: flex; justify-content: center; gap: 3px; pointer-events: none; } .day .bfx-dotrow .dot { position: static; width: 5px; height: 5px; } .day .bfx-dotrow .dot.wl { background: var(--ok); box-shadow: 0 0 8px var(--ok); } .day.sel .bfx-dotrow .dot { background: var(--on-accent); box-shadow: 0 0 8px rgba(255,255,255,.8); } .bfx-main { padding-bottom: calc(176px + var(--sab, env(safe-area-inset-bottom))); } @media (min-width: 1024px) { .bfx-main { padding-bottom: 40px; } } .bfx-side .nav { gap: 10px; padding: 6px 12px; line-height: 1.2; } .bfx-side .nav span { white-space: normal; overflow: visible; } @media (min-width: 1024px) { .bfx-main .cal { --day-ar: 6 / 5; } } /* ── Día ── */ .bfx-restbar { position: fixed; left: 14px; right: 14px; bottom: calc(100px + var(--sab, env(safe-area-inset-bottom))); z-index: 6; max-width: 560px; margin: 0 auto; border-radius: var(--r-lg); padding: 10px 10px 10px 12px; animation: toastin 350ms cubic-bezier(.2,.9,.3,1.3) both; translate: 0 0; } .bf.bf-app[data-theme="xp"] .bfx-restbar { bottom: calc(80px + var(--sab, env(safe-area-inset-bottom))); } @media (min-width: 1024px) { .bfx-restbar { left: auto; right: 28px; bottom: 28px; width: 420px; } } .bfx-restbar { display: flex; align-items: center; gap: 8px; } .bfx-rb-step { padding: 0; width: 46px; flex: none; font-variant-numeric: tabular-nums; font-weight: 700; } @media (max-width: 360px) { .bfx-restbar .num { font-size: 22px !important; } .bfx-rb-step { width: 40px; } } /* ── Descanso a pantalla completa · liquid glass ── Una sola capa con backdrop-filter (el overlay); todo lo de adentro es vidrio "falso" con gradientes: nada de .glass anidado (blur sobre blur = parches blancos, #23/#37). */ .bfx-restfull { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; color: var(--rf-text); overflow: hidden; padding: calc(14px + var(--sat, env(safe-area-inset-top))) 18px calc(18px + var(--sab, env(safe-area-inset-bottom))); background: color-mix(in srgb, var(--rf-scrim) 84%, transparent); -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%); animation: bfx-rf-in 520ms cubic-bezier(.2,.9,.25,1.15) both; } @keyframes bfx-rf-in { from { opacity: 0; clip-path: circle(0% at 50% 92%); } to { opacity: 1; clip-path: circle(150% at 50% 92%); } } .bfx-rf-blobs { position: absolute; inset: 0; pointer-events: none; } .bfx-rf-blobs i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 42% 58% 61% 39% / 45% 39% 61% 55%; opacity: .5; will-change: transform; background: radial-gradient(circle at 50% 50%, var(--accent) 0%, transparent 62%); animation: bfx-rf-blob 14s ease-in-out infinite alternate; } .bfx-rf-blobs i:nth-child(1) { left: -30vmax; top: -25vmax; } .bfx-rf-blobs i:nth-child(2) { right: -35vmax; top: 20%; background: radial-gradient(circle, var(--accent2) 0%, transparent 62%); animation-duration: 18s; animation-delay: -6s; } .bfx-rf-blobs i:nth-child(3) { left: -10vmax; bottom: -40vmax; background: radial-gradient(circle, var(--o3, var(--accent)) 0%, transparent 62%); animation-duration: 22s; animation-delay: -11s; opacity: .35; } @keyframes bfx-rf-blob { 0% { transform: translate(0,0) rotate(0) scale(1); } 50% { transform: translate(6vmax,4vmax) rotate(40deg) scale(1.12); } 100% { transform: translate(-4vmax,8vmax) rotate(-30deg) scale(.95); } } .bfx-restfull.hurry .bfx-rf-blobs i { background: radial-gradient(circle, #ff7a3c 0%, transparent 62%); transition: background .6s; } /* vidrio falso reutilizable: borde especular + brillo superior, sin blur */ .bfx-rf-glass { color: var(--rf-text); border: 1px solid color-mix(in srgb, var(--rf-text) 22%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--rf-text) 20%, transparent), color-mix(in srgb, var(--rf-text) 5%, transparent) 55%, color-mix(in srgb, var(--rf-text) 10%, transparent)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--rf-text) 45%, transparent), inset 0 -10px 20px rgba(0,0,0,.10), 0 14px 30px -14px rgba(0,0,0,.45); transition: transform 260ms cubic-bezier(.2,.9,.3,1.7); -webkit-tap-highlight-color: transparent; } .bfx-rf-glass:active { transform: scale(.88); } .bfx-rf-top { position: relative; width: 100%; max-width: 520px; display: flex; align-items: center; justify-content: space-between; } .bfx-rf-icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; } .bfx-rf-chip { font-family: var(--font-d); font-weight: 700; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; opacity: .85; } .bfx-rf-stage { position: relative; flex: 1 1 0; min-height: 0; width: 100%; display: grid; place-items: center; } .bfx-rf-orb { --sz: min(76vw, 44vh, 340px); position: relative; width: var(--sz); height: var(--sz); border-radius: 50%; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--rf-text) 10%, transparent), transparent 60%), color-mix(in srgb, var(--rf-text) 4%, transparent); border: 1.5px solid color-mix(in srgb, var(--rf-text) 28%, transparent); box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--rf-text) 4%, transparent), inset 0 -18px 40px rgba(0,0,0,.18), 0 30px 70px -20px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 0 10px color-mix(in srgb, var(--accent) 10%, transparent); animation: bfx-rf-float 5s ease-in-out infinite; } @keyframes bfx-rf-float { 50% { transform: translateY(-8px); } } .bfx-rf-water { position: absolute; left: 0; right: 0; bottom: 0; transition: height .35s linear, filter .6s; background: linear-gradient(180deg, color-mix(in srgb, var(--accent2) 85%, transparent), color-mix(in srgb, var(--accent) 95%, #000 5%)); } .bfx-rf-wave { position: absolute; left: 0; bottom: calc(100% - 1px); width: 200%; height: 22px; fill: color-mix(in srgb, var(--accent2) 85%, transparent); will-change: transform; animation: bfx-rf-wave 3.2s linear infinite; } .bfx-rf-wave.w2 { height: 18px; opacity: .5; animation-duration: 5.5s; animation-direction: reverse; } @keyframes bfx-rf-wave { to { transform: translateX(-50%); } } .bfx-rf-bubbles b { position: absolute; bottom: -10px; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--rf-text) 55%, transparent); background: color-mix(in srgb, var(--rf-text) 12%, transparent); animation: bfx-rf-bub 4s ease-in infinite; } .bfx-rf-bubbles b:nth-child(1) { left: 18%; animation-delay: 0s; } .bfx-rf-bubbles b:nth-child(2) { left: 40%; width: 5px; height: 5px; animation-delay: 1.3s; animation-duration: 3.2s; } .bfx-rf-bubbles b:nth-child(3) { left: 62%; animation-delay: 2.1s; } .bfx-rf-bubbles b:nth-child(4) { left: 78%; width: 6px; height: 6px; animation-delay: .7s; animation-duration: 4.6s; } .bfx-rf-bubbles b:nth-child(5) { left: 30%; width: 4px; height: 4px; animation-delay: 2.8s; animation-duration: 3.6s; } @keyframes bfx-rf-bub { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(calc(var(--sz, 300px) * -1)); opacity: 0; } } .bfx-rf-shine { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 2; background: radial-gradient(ellipse 38% 22% at 32% 18%, rgba(255,255,255,.55), transparent 70%), radial-gradient(circle at 50% 50%, transparent 62%, rgba(255,255,255,.12) 72%, transparent 74%); } .bfx-rf-time { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 12%; text-shadow: 0 1px 12px color-mix(in srgb, var(--rf-scrim) 75%, transparent); } .bfx-rf-time .num { font-family: var(--font-d); font-weight: 700; font-size: calc(var(--sz) * .26); line-height: 1; letter-spacing: -.02em; color: var(--rf-text); } .bfx-rf-time small { margin-top: 8px; font-size: 15px; font-weight: 700; opacity: .85; color: var(--rf-text); } .bfx-restfull.hurry .bfx-rf-water { filter: hue-rotate(150deg) saturate(1.4); } .bfx-restfull.hurry .bfx-rf-orb { animation: bfx-rf-beat 1s ease-in-out infinite; } @keyframes bfx-rf-beat { 0%,100% { transform: scale(1); } 15% { transform: scale(1.045); } 30% { transform: scale(.99); } } .bfx-restfull.done .bfx-rf-orb { animation: bfx-rf-pop 700ms cubic-bezier(.2,.9,.3,1.6) both; box-shadow: 0 0 0 0 var(--ok), 0 30px 70px -20px var(--ok); } .bfx-restfull.done .bfx-rf-time .num { animation: bfx-rf-pop 600ms cubic-bezier(.2,.9,.3,1.6) both; } @keyframes bfx-rf-pop { 0% { transform: scale(.85); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } } .bfx-rf-ctrls { position: relative; width: 100%; max-width: 420px; display: flex; align-items: center; justify-content: center; gap: 18px; margin: 10px 0 18px; } .bfx-rf-round { width: 76px; height: 76px; flex: none; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; } .bfx-rf-round b { font-family: var(--font-d); font-size: 22px; font-variant-numeric: tabular-nums; } .bfx-rf-round small { font-size: 12px; opacity: .7; margin-top: 2px; } .bfx-rf-skip { flex: 1 1 0; max-width: 170px; height: 64px; border-radius: 999px; font-family: var(--font-d); font-weight: 700; font-size: 18px; color: var(--on-accent); background: radial-gradient(circle at 30% 15%, rgba(255,255,255,.45), transparent 50%), var(--btn-bg); border: 1px solid rgba(255,255,255,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 18px 34px -12px var(--accent); transition: transform 260ms cubic-bezier(.2,.9,.3,1.7); } .bfx-rf-skip:active { transform: scale(.92); } .bfx-rf-prefs { position: relative; width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border-radius: 26px; border: 1px solid color-mix(in srgb, var(--rf-text) 16%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--rf-text) 12%, transparent), color-mix(in srgb, var(--rf-text) 3%, transparent)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--rf-text) 30%, transparent); } .bfx-rf-prefs .step { height: 48px; } .bfx-rf-prefs .step button { width: 38px; height: 38px; } .bfx-rf-prefs .step { color: var(--rf-text); background: color-mix(in srgb, var(--rf-text) 10%, transparent); border-color: color-mix(in srgb, var(--rf-text) 20%, transparent); box-shadow: none; } .bfx-rf-prefs .step button { color: var(--rf-text); background: color-mix(in srgb, var(--rf-text) 14%, transparent); border-color: color-mix(in srgb, var(--rf-text) 22%, transparent); } @media (max-height: 640px) { .bfx-rf-round { width: 64px; height: 64px; } .bfx-rf-skip { height: 56px; } .bfx-rf-prefs { padding: 10px 14px; gap: 8px; } .bfx-rf-ctrls { margin: 6px 0 10px; } } @media (prefers-reduced-motion: reduce) { .bfx-restfull, .bfx-rf-blobs i, .bfx-rf-orb, .bfx-rf-wave, .bfx-rf-bubbles b, .bfx-rf-time .num { animation: none !important; } } /* con el descanso abierto la campana sube por encima de la barra, nunca queda debajo */ .bf.bf-app .assist { transition: bottom .35s cubic-bezier(.2,.9,.3,1.2); } body:has(.bfx-restbar) .bf.bf-app .assist { bottom: calc(184px + var(--sab, env(safe-area-inset-bottom))); } body:has(.bfx-restbar) .bf.bf-app[data-theme="xp"] .assist { bottom: calc(164px + var(--sab, env(safe-area-inset-bottom))); } .bfx-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; } .bfx-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .bfx-media-del { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.35); } .bfx-media-del::before { content: ""; position: absolute; inset: -6px; } .bfx-viewer { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.92); display: grid; place-items: center; padding: 16px; animation: fi 175ms ease both; } .bfx-viewer-media { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: var(--r-sm); object-fit: contain; } .bfx-open { animation: fi 280ms ease both; } .ex .setrow .step { min-width: 0; } .ex.done { opacity: .9; } /* El .wrap del mockup (flex-wrap) choca con el .wrap global de la app (contenedor centrado). */ .bfx-wrap { flex-wrap: wrap; } /* ── Nueva rutina: barra de acciones (reemplaza al dock en móvil) ── */ .bfx-actionbar { position: fixed; left: 14px; right: 14px; bottom: calc(14px + var(--sab, env(safe-area-inset-bottom))); z-index: 6; max-width: 560px; margin: 0 auto; display: flex; gap: 10px; padding: 8px; border-radius: var(--r-lg); } .bfx-actionbar .btn { min-height: 52px; } .bf.bf-app[data-theme="xp"] .bfx-actionbar { left: 0; right: 0; bottom: 0; border-radius: 0; max-width: none; padding-bottom: calc(8px + var(--sab, env(safe-area-inset-bottom))); } @media (min-width: 1024px) { .bfx-actionbar { position: sticky; left: auto; right: auto; bottom: 20px; max-width: none; margin: 8px 0 0; } } /* Segmentos con 3 opciones o textos largos: en móvil el ícono va arriba y el texto puede usar 2 líneas (nada de "Cans…"). */ @media (max-width: 520px) { .seg.bfx-segstack .chip { flex-direction: column; gap: 3px; height: auto; min-height: 56px; padding: 7px 4px; font-size: 13px; } .seg.bfx-segstack .chip .truncate { white-space: normal; overflow: visible; text-overflow: clip; text-align: center; line-height: 1.15; } .seg.bfx-segstack { border-radius: var(--r-lg); } } /* Selector de ejercicios largo dentro de un formulario: su propia región con scroll, no 8000 px de página. */ .bfx-pick-scroll { max-height: min(60vh, 520px); overflow-y: auto; overscroll-behavior: contain; padding: 6px 8px; margin: -6px -8px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } /* ── F6 · Resumen + Mis stats ── */ .r-md { border-radius: var(--r-md); } .spin { animation: bfxspin 1s linear infinite; } @keyframes bfxspin { to { transform: rotate(360deg); } } .bfx-2col { display: flex; flex-direction: column; gap: 12px; } @media (min-width: 1024px) { .bfx-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; } } /* Solo keyframe "from": al terminar vuelve al valor inline (que React puede cambiar al refrescar). */ .bfx-ring { animation: bfxring 1680ms cubic-bezier(.25,.1,.15,1) 350ms backwards; } @keyframes bfxring { from { stroke-dashoffset: var(--c); } } .bfx-vbar { display: block; width: 100%; min-height: 3px; border-radius: 6px 6px 3px 3px; background: linear-gradient(to top, var(--accent), var(--accent2)); transform-origin: bottom; animation: bfxgrowy 1050ms cubic-bezier(.25,.1,.15,1) backwards; animation-delay: calc(var(--k, 0) * 56ms + 350ms); } @keyframes bfxgrowy { from { transform: scaleY(0); } } .bfx-grow { display: block; height: 100%; transform-origin: left; animation: bfxgrowx 1260ms cubic-bezier(.25,.1,.15,1) backwards; animation-delay: calc(var(--k, 0) * 119ms + 420ms); } @keyframes bfxgrowx { from { transform: scaleX(0); } } /* Línea (BfSpark): barrido izq→der del SVG entero. Antes era stroke-dasharray:2000 sobre una línea de ~400px, así que aparecía completa en los primeros ~80ms y no se veía dibujarse. */ .bfx-wipe { animation: bfxwipe 900ms cubic-bezier(.33,.6,.25,1) backwards 150ms; } /* Mapita (BfMap): el mapa aparece con un zoom suave, el pin cae y late; el calor crece de a uno y respira. */ .bfx-map { animation: bfxmapin 1500ms cubic-bezier(.25,.1,.15,1) 300ms backwards; transform-origin: center; } @keyframes bfxmapin { from { opacity: 0; transform: scale(1.14); filter: blur(6px); } } .bfx-pin { transform-box: fill-box; transform-origin: 50% 100%; animation: bfxpin 950ms cubic-bezier(.3,1.35,.5,1) 1000ms backwards; } @keyframes bfxpin { from { opacity: 0; transform: translateY(-34px) scale(.6); } } .bfx-pulse { transform-box: fill-box; transform-origin: center; animation: bfxpulse 2400ms cubic-bezier(.2,.6,.3,1) 1900ms infinite backwards; } @keyframes bfxpulse { 0% { opacity: .55; transform: scale(.5); } 100% { opacity: 0; transform: scale(2.6); } } .bfx-heat { transform-box: fill-box; transform-origin: center; animation: bfxheat 1300ms cubic-bezier(.25,.1,.15,1) var(--d, 900ms) backwards, bfxbreath 3600ms ease-in-out calc(var(--d, 900ms) + 1300ms) infinite alternate; } @keyframes bfxheat { 0% { opacity: 0; transform: scale(.2); } 35% { opacity: 1; transform: scale(1.12); } 100% { transform: scale(1); } } @keyframes bfxbreath { from { transform: scale(1); opacity: 1; } to { transform: scale(1.1); opacity: .82; } } .bfx-drop { transform-box: fill-box; transform-origin: center; opacity: 0; animation: bfxdrop 1400ms cubic-bezier(.2,.6,.3,1) var(--d, 900ms) 1 both; } @keyframes bfxdrop { 0% { opacity: .75; transform: scale(.2); } 100% { opacity: 0; transform: scale(2.6); } } @keyframes bfxwipe { from { clip-path: inset(-12px 100% -12px -12px); } to { clip-path: inset(-12px -12px -12px -12px); } } /* Ver useBfChartsInView(): en pausa (mostrando el estado inicial) hasta que el gráfico entra en pantalla. */ html[data-bfxio] .bf.bf-app :is(.bars i, .meter > b, .stack b, .wk i, .progress > b, .bfx-vbar, .bfx-grow, .bfx-ring, .bfx-wipe, .fitness-hr-spark path, .bfx-map, .bfx-pin, .bfx-pulse, .bfx-heat, .bfx-drop, .bfx-trail, .bfx-comet):not([data-bfseen]) { animation-play-state: paused; } /* Estelas de recorridos (BfMap routes): la línea se traza y después una lucecita la recorre en loop. */ .bfx-trail { stroke-dasharray: 100; animation: bfxtrail 1700ms cubic-bezier(.45,0,.2,1) var(--d, 350ms) backwards; } @keyframes bfxtrail { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } } .bfx-comet { stroke-dasharray: 7 93; animation: bfxcomet 3400ms linear calc(var(--d, 350ms) + 1500ms) infinite backwards; } @keyframes bfxcomet { 0% { stroke-dashoffset: 100; opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } } @media (prefers-reduced-motion: reduce) { .bfx-ring, .bfx-vbar, .bfx-grow, .bfx-wipe, .spin, .bfx-map, .bfx-pin, .bfx-pulse, .bfx-heat, .bfx-trail { animation: none; } .bfx-drop, .bfx-comet { display: none; } } /* ── F7 · bloques legacy (Drive/admin) dentro de una sección v3: se aplanan sus tarjetas para no apilar vidrio sobre vidrio (blur anidado = parches blancos, ver bug #23/#37). ── */ .bfx-legacy .glass { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .bfx-legacy .inp { background: var(--field); border: var(--bw) solid var(--stroke); border-radius: var(--r-sm); min-height: 48px; color: inherit; } .bfx-legacy .btn { min-height: 48px; } .bfx-row-on { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--glass-hi); } .bfx-plate { transform-origin: center; animation: bfxplate 315ms cubic-bezier(.2,.9,.3,1.2) backwards; animation-delay: calc(var(--k, 0) * 42ms); } @keyframes bfxplate { from { transform: translateX(-30px) scaleY(.6); opacity: 0; } } /* Tour de bienvenida (componente legacy): mismos campos y botones que el resto de v3. */ .bfx-main .fitness-glass-in .inp { background: var(--field); border: var(--bw) solid var(--stroke); border-radius: var(--r-sm); min-height: 48px; padding: 0 14px; color: inherit; font-size: 15px; } .bfx-main .fitness-glass-in textarea.inp { padding: 12px 14px; } .bfx-main .fitness-glass-in .btn { min-height: 50px; font-size: 15px; } .bfx-main .fitness-glass-in .btn.bg-blue-600 { background: var(--btn-bg); color: var(--on-accent); text-shadow: var(--btn-ts); border-color: rgba(255,255,255,.4); } .bfx-main .fitness-glass-in .text-xs { font-size: 14px; } .bfx-main .fitness-glass-in .text-\[11px\], .bfx-main .fitness-glass-in .text-\[10px\] { font-size: 13px; } .bfx-beat { animation: bfxbeat 1.1s ease-in-out infinite; transform-origin: center; } @keyframes bfxbeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.22); } 30% { transform: scale(.96); } 45% { transform: scale(1.12); } } /* ═════════════ Animación everywhere (Victor: "entrada, salida, transición, volver… todo") ═════════════ Regla: SIEMPRE fill-mode backwards (nunca both/forwards) para que al terminar la animación el elemento vuelva a sus estilos propios — si no, la animación pisa transform/opacity inline (swipe, drag, salir). */ /* 1) Transiciones entre pantallas (View Transitions API, ver bfTransition en index.html) */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 322ms; animation-timing-function: cubic-bezier(.2,.8,.2,1); mix-blend-mode: normal; } html[data-bfdir="fwd"]::view-transition-old(root) { animation-name: bfvt-out-l; } html[data-bfdir="fwd"]::view-transition-new(root) { animation-name: bfvt-in-r; } html[data-bfdir="back"]::view-transition-old(root) { animation-name: bfvt-out-r; } html[data-bfdir="back"]::view-transition-new(root) { animation-name: bfvt-in-l; } html[data-bfdir="tab"]::view-transition-old(root) { animation-name: bfvt-fade-out; animation-duration: 196ms; } html[data-bfdir="tab"]::view-transition-new(root) { animation-name: bfvt-fade-in; animation-duration: 294ms; } @keyframes bfvt-out-l { to { transform: translateX(-22%); opacity: 0; filter: blur(3px); } } @keyframes bfvt-in-r { from { transform: translateX(26%); opacity: 0; } } @keyframes bfvt-out-r { to { transform: translateX(22%); opacity: 0; filter: blur(3px); } } @keyframes bfvt-in-l { from { transform: translateX(-26%); opacity: 0; } } @keyframes bfvt-fade-out { to { opacity: 0; transform: scale(.98); } } @keyframes bfvt-fade-in { from { opacity: 0; transform: scale(1.025); } } /* lo fijo no viaja con la pantalla: fondo, dock, orbe y sidebar se quedan quietos */ .bf.bf-app > .bg { view-transition-name: bfbg; } .bf.bf-app .dock { view-transition-name: bfdock; } .bf.bf-app .assist { view-transition-name: bfassist; } .bf.bf-app .bfx-side { view-transition-name: bfside; } ::view-transition-group(bfbg), ::view-transition-group(bfdock), ::view-transition-group(bfassist), ::view-transition-group(bfside) { animation-duration: 210ms; } /* 2) Al montar cualquier pantalla: el contenido entra en cascada (también en la primera apertura) */ .bfx-page { animation: bfx-pagein 350ms cubic-bezier(.2,.8,.2,1) backwards; } @keyframes bfx-pagein { from { opacity: 0; translate: 0 14px; } } :where(.bfx-page) :where(.row-item, .ex, .tile, section.glass, .glass.pad-lg, .bfx-2col > div > *, .media, .lrow) { animation: bfx-in 434ms cubic-bezier(.2,.9,.25,1.08) backwards; animation-delay: calc(var(--si, 0) * 38ms + 63ms); } @keyframes bfx-in { from { opacity: 0; translate: 0 18px; scale: .97; } } :where(.bfx-page) :is(.row-item, .ex, .tile, section.glass, .glass.pad-lg, .media, .lrow):nth-child(1) { --si: 0; } :where(.bfx-page) :is(.row-item, .ex, .tile, section.glass, .glass.pad-lg, .media, .lrow):nth-child(2) { --si: 1; } :where(.bfx-page) :is(.row-item, .ex, .tile, section.glass, .glass.pad-lg, .media, .lrow):nth-child(3) { --si: 2; } :where(.bfx-page) :is(.row-item, .ex, .tile, section.glass, .glass.pad-lg, .media, .lrow):nth-child(4) { --si: 3; } :where(.bfx-page) :is(.row-item, .ex, .tile, section.glass, .glass.pad-lg, .media, .lrow):nth-child(5) { --si: 4; } :where(.bfx-page) :is(.row-item, .ex, .tile, section.glass, .glass.pad-lg, .media, .lrow):nth-child(6) { --si: 5; } :where(.bfx-page) :is(.row-item, .ex, .tile, section.glass, .glass.pad-lg, .media, .lrow):nth-child(7) { --si: 6; } :where(.bfx-page) :is(.row-item, .ex, .tile, section.glass, .glass.pad-lg, .media, .lrow):nth-child(8) { --si: 7; } :where(.bfx-page) :is(.row-item, .ex, .tile, section.glass, .glass.pad-lg, .media, .lrow):nth-child(n+9) { --si: 8; } /* chips de filtros y segmentos: pop escalonado */ :where(.bfx-page) :where(.bfx-wrap > .chip, .seg > .chip) { animation: bfx-chip 315ms cubic-bezier(.2,.9,.3,1.4) backwards; animation-delay: calc(var(--ci, 0) * 28ms + 112ms); } :where(.bfx-page) :is(.bfx-wrap, .seg) > .chip:nth-child(2) { --ci: 1; } :where(.bfx-page) :is(.bfx-wrap, .seg) > .chip:nth-child(3) { --ci: 2; } :where(.bfx-page) :is(.bfx-wrap, .seg) > .chip:nth-child(4) { --ci: 3; } :where(.bfx-page) :is(.bfx-wrap, .seg) > .chip:nth-child(n+5) { --ci: 4; } @keyframes bfx-chip { from { opacity: 0; scale: .7; } } /* 3) Calendario: los días caen en cascada (cada cambio de mes vuelve a montar la grilla) */ .cal .day:not(.empty) { animation: bfx-day 350ms cubic-bezier(.2,.9,.3,1.35) backwards; animation-delay: calc(var(--di, 0) * 10ms + 84ms); } @keyframes bfx-day { from { opacity: 0; scale: .55; translate: 0 -10px; } } /* 4) Primera apertura: dock sube, orbe hace pop, sidebar entra deslizando */ .bf.bf-app .dock { animation: bfx-dockin 560ms cubic-bezier(.2,.9,.25,1.15) 105ms backwards; } @keyframes bfx-dockin { from { translate: 0 140%; opacity: 0; } } .bf.bf-app .assist { animation: bfx-orbin 490ms cubic-bezier(.2,.9,.3,1.6) 385ms backwards; } @keyframes bfx-orbin { from { scale: 0; opacity: 0; rotate: -90deg; } } @media (min-width: 1024px) { .bf.bf-app .bfx-side { animation: bfx-sidein 490ms cubic-bezier(.2,.9,.25,1.05) backwards; } } @keyframes bfx-sidein { from { translate: -40px 0; opacity: 0; } } .bfx-side .nav { animation: bfx-in 350ms cubic-bezier(.2,.9,.25,1.08) backwards; } .bfx-side .nav:nth-of-type(2) { animation-delay: 42ms; } .bfx-side .nav:nth-of-type(3) { animation-delay: 84ms; } .bfx-side .nav:nth-of-type(4) { animation-delay: 126ms; } .bfx-side .nav:nth-of-type(5) { animation-delay: 168ms; } .bfx-side .nav:nth-of-type(n+6) { animation-delay: 210ms; } /* 5) Salidas: hojas bajan y el fondo se apaga antes de desmontarse */ .bfx-layer.closing .bfx-sheet { animation: bfx-sheetdown 182ms cubic-bezier(.4,0,1,1) forwards; } .bfx-layer.closing .bfx-scrim { animation: bfx-fadeout 182ms ease forwards; } @keyframes bfx-sheetdown { to { translate: 0 100%; } } @keyframes bfx-fadeout { to { opacity: 0; } } @media (min-width: 1024px) { .bfx-layer.closing .bfx-sheet { animation-name: bfx-sheetout; } } @keyframes bfx-sheetout { to { opacity: 0; scale: .95; translate: 0 12px; } } /* 6) Micro-interacciones */ .icon-btn:active, .row-item:active, .day:active, .tile:active { scale: .94; transition: scale 84ms; } .setchk.on { animation: bfx-check 315ms cubic-bezier(.2,.9,.3,1.8); } @keyframes bfx-check { 0% { scale: .7; } 60% { scale: 1.18; } 100% { scale: 1; } } .bfx-open { animation: bfx-expand 294ms cubic-bezier(.2,.9,.25,1.05); } @keyframes bfx-expand { from { opacity: .4; } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } .bfx-page, .bfx-page *, .cal .day, .bf.bf-app .dock, .bf.bf-app .assist, .bfx-side, .bfx-side .nav { animation: none !important; } } /* ── Tour "Novedades de BookerFitness 3" ── */ .bfx-tour { align-items: center; padding: 16px; } .bfx-tour-card { position: relative; width: 100%; max-width: 460px; border-radius: var(--r-lg); padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 14px; max-height: calc(100dvh / var(--bfz, 1) - 32px); overflow-y: auto; animation: bfx-tourin 420ms cubic-bezier(.2,.9,.25,1.12) backwards; } @keyframes bfx-tourin { from { opacity: 0; scale: .85; translate: 0 30px; } } .bfx-tour-step { animation: 350ms cubic-bezier(.2,.9,.25,1.05) backwards; } .bfx-tour-step.from-r { animation-name: bfx-step-r; } .bfx-tour-step.from-l { animation-name: bfx-step-l; } @keyframes bfx-step-r { from { opacity: 0; translate: 40px 0; } } @keyframes bfx-step-l { from { opacity: 0; translate: -40px 0; } } .bfx-tour-step > * { animation: bfx-in 385ms cubic-bezier(.2,.9,.25,1.08) backwards; } .bfx-tour-step > :nth-child(2) { animation-delay: 84ms; } .bfx-tour-step > :nth-child(3) { animation-delay: 140ms; } .bfx-tour-step > :nth-child(4) { animation-delay: 196ms; } .bfx-tour-demo { min-height: 150px; padding: 6px 2px; } .bfx-tour-dots { justify-content: center; } .bfx-tour-dots i { width: 8px; height: 8px; border-radius: 99px; background: var(--stroke); transition: width 245ms cubic-bezier(.2,.9,.3,1.3), background 210ms; } .bfx-tour-dots i.past { background: color-mix(in srgb, var(--accent) 45%, transparent); } .bfx-tour-dots i.on { width: 26px; background: var(--accent); } .bfx-tour-logo { position: relative; display: grid; place-items: center; animation: bfx-float 3.2s ease-in-out infinite; } .bfx-tour-logo b { position: absolute; right: -26px; bottom: -6px; padding: 4px 10px; border-radius: 99px; background: var(--btn-bg); color: var(--on-accent); font-family: var(--font-d); font-size: 15px; box-shadow: 0 8px 20px -6px var(--accent); animation: bfx-chip 420ms cubic-bezier(.2,.9,.3,1.6) 350ms backwards; } @keyframes bfx-float { 50% { translate: 0 -8px; rotate: -2deg; } } .bfx-tour-tab { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1 1 0; min-width: 0; padding: 6px 0; border-radius: 18px; color: var(--dim); transition: color 210ms, background 210ms, scale 210ms cubic-bezier(.2,.9,.3,1.6); } .bfx-tour-tab small { font-size: 10px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bfx-tour-tab.on { color: var(--text); background: var(--glass); scale: 1.08; } .bfx-tour-fab { width: 54px; height: 54px; margin-top: -26px; border-radius: 50%; display: grid; place-items: center; color: var(--on-accent); background: var(--btn-bg); box-shadow: 0 10px 22px -8px var(--accent); flex: none; animation: bfx-breathe 2.4s ease-in-out infinite; } @keyframes bfx-breathe { 50% { scale: 1.08; } } .bfx-tour-orb { position: absolute; right: 18px; top: 4px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--btn-bg); box-shadow: 0 0 0 0 var(--accent); animation: bfx-orbping 2s ease-out infinite; } .bfx-tour-orb b { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; border-radius: 99px; background: #ff5a3c; font-size: 11px; display: grid; place-items: center; } @keyframes bfx-orbping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } 100% { box-shadow: 0 0 0 18px transparent; } } .bfx-tour-rest { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 14px; border-radius: 99px; background: var(--glass); border: var(--bw) solid var(--stroke); opacity: 0; translate: 0 10px; transition: opacity 245ms, translate 315ms cubic-bezier(.2,.9,.3,1.4); } .bfx-tour-rest.show { opacity: 1; translate: 0 0; } .bfx-tour-rest span { font-size: 12px; font-weight: 700; color: var(--dim); } .bfx-tour-fadein { animation: bfx-in 350ms cubic-bezier(.2,.9,.25,1.08) backwards; } .bfx-tour-swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 78px; padding: 8px 4px; border-radius: 16px; background: transparent; border: 2px solid transparent; color: inherit; cursor: pointer; animation: bfx-chip 350ms cubic-bezier(.2,.9,.3,1.5) backwards; animation-delay: calc(var(--k, 0) * 42ms + 105ms); transition: border-color 175ms, scale 175ms; } .bfx-tour-swatch span { width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255,255,255,.8); box-shadow: 0 4px 10px rgba(0,0,0,.3); } .bfx-tour-swatch small { font-size: 11px; font-weight: 700; } .bfx-tour-swatch.on { border-color: var(--accent); scale: 1.06; } .bfx-tour-bubble { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; } .bfx-tour-caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -2px; background: currentColor; animation: bfx-blink 1s steps(2) infinite; } @keyframes bfx-blink { 50% { opacity: 0; } } .bfx-tour-done { width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #12b981, #3ddc97); box-shadow: 0 18px 40px -12px #12b981; animation: bfx-check 560ms cubic-bezier(.2,.9,.3,1.8) 105ms backwards; } @media (prefers-reduced-motion: reduce) { .bfx-tour-card, .bfx-tour-step, .bfx-tour-step > *, .bfx-tour-logo, .bfx-tour-fab, .bfx-tour-orb, .bfx-tour-swatch, .bfx-tour-done, .bfx-tour-caret { animation: none !important; } } .bfx-tour .bfx-scrim { background: rgba(0,0,12,.66); -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); } .bfx-tour-card.glass.strong { background: var(--panel-bg-strong, var(--glass-hi)); } /* Filas con scroll horizontal (chips de récords): sin barra visible y con aire alrededor para que no se recorten el borde, el brillo ni la sombra de los chips (overflow:auto corta todo lo que sale de la caja). Los bordes se desvanecen para indicar que hay más hacia el costado. */ .bfx-hscroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; padding: 8px 12px 14px; margin: 0 -12px -6px; scroll-padding-inline: 12px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%); } .bfx-hscroll::-webkit-scrollbar { display: none; } .bfx-hscroll > * { flex: none; } /* Resumen del mes · escritorio (rediseño 2026-10-16): grilla de 12, lecturas, semanas desplegables. */ .bfx-rs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; align-items: stretch; } .bfx-rs > .bfx-c4 { grid-column: span 4; } .bfx-rs > .bfx-c5 { grid-column: span 5; } .bfx-rs > .bfx-c7 { grid-column: span 7; } .bfx-rs > .bfx-c8 { grid-column: span 8; } .bfx-rs > .bfx-c12 { grid-column: 1 / -1; } @media (max-width: 1180px) { .bfx-rs > * { grid-column: span 6 !important; } .bfx-rs > .bfx-c12 { grid-column: 1 / -1 !important; } } .bfx-rs > section { display: flex; flex-direction: column; } .bfx-ins { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); background: var(--field); border: var(--bw) solid var(--stroke); color: inherit; font: inherit; width: 100%; } .bfx-ins .n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--btn-bg); color: var(--on-accent); } button.bfx-ins { cursor: pointer; transition: transform .2s; } button.bfx-ins:hover { transform: translateY(-2px); } .bfx-wk { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px; width: 100%; text-align: left; border-radius: var(--r-md); background: none; border: 0; color: inherit; font: inherit; cursor: pointer; } .bfx-tag { display: inline-flex; align-items: center; min-height: 26px; padding: 0 12px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--field); border: var(--bw) solid var(--stroke); } .bfx-pips { display: inline-flex; gap: 4px; } .bfx-pips i { display: block; width: 16px; height: 6px; border-radius: 99px; background: var(--stroke); } .bfx-pips i.on { background: var(--accent); box-shadow: 0 0 8px -1px var(--accent); } /* Mapa interactivo: el lugar activo crece (transición propia, aparte de la respiración) y sale un globito. */ .bfx-hot { transform-box: fill-box; transform-origin: center; transition: transform 380ms cubic-bezier(.3,1.4,.5,1), opacity 300ms ease; } .bfx-tip { position: absolute; z-index: 3; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 12px; border-radius: 12px; white-space: nowrap; font-size: 12px; color: #fff; background: rgba(10,12,24,.88); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 10px 28px -10px rgba(0,0,0,.6); transform: translate(-50%, -100%); animation: bfxtip 300ms cubic-bezier(.2,.9,.3,1.3) both; } .bfx-tip b { font-size: 13px; } .bfx-tip span { opacity: .75; } .bfx-tip::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: inherit; border-right: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); transform: translateX(-50%) rotate(45deg); } @keyframes bfxtip { from { opacity: 0; transform: translate(-50%, -70%) scale(.85); } to { opacity: 1; transform: translate(-50%, -100%) scale(1); } } .bfx-tip.below { transform: translate(-50%, 0); animation-name: bfxtipb; } .bfx-tip.below::after { bottom: auto; top: -5px; transform: translateX(-50%) rotate(225deg); } @keyframes bfxtipb { from { opacity: 0; transform: translate(-50%, -30%) scale(.85); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } } .bfx-ins.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 8px 22px -12px var(--accent); transform: translateX(4px); } .bfx-ins { transition: transform .25s cubic-bezier(.3,1.4,.5,1), box-shadow .25s, border-color .25s; } .bfx-calh { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; text-align: center; font-size: 12px; font-weight: 700; color: var(--dim); margin-bottom: 6px; } /* Esqueletos de carga sin animación de entrada: el contenido real es el que anima (una sola vez). */ .bfx-noanim, .bfx-noanim *:not(.bfx-skel) { animation: none !important; } /* Rutina en escritorio (rediseño): ejercicios a la izquierda, progreso/dónde/galería/reloj a la derecha. */ .bfx-plansplit { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: start; } @media (max-width: 1023px) { .bfx-plansplit { grid-template-columns: minmax(0, 1fr); } } /* ═════ Admin de Fitness (rediseño): .bfa-* ═════ */ .bfa-card { border-radius: var(--r-lg); min-width: 0; } .bfa .bfa-card, .bfa-link { overflow-wrap: anywhere; } .bfa-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .bfa-head-r { flex: none; max-width: 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .bfa-row { display: flex; align-items: center; gap: 14px; min-width: 0; } .bfa-row.wrap { flex-wrap: wrap; } .bfa-row > .bfa-tg { flex: none; } .bfa-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .bfa-actions > .btn, .bfa-actions > .chip { flex: 0 1 auto; min-width: 0; white-space: normal; } .bfa-box { margin-top: 14px; padding: 14px; border-radius: var(--r-md); background: var(--field); border: var(--bw) solid var(--stroke); animation: rise .45s cubic-bezier(.2,.8,.2,1) both; min-width: 0; } .bfa-bubble { margin-top: 16px; padding: 16px 18px; border-radius: var(--r-md); background: var(--glass-hi); border: var(--bw) solid var(--stroke); } .bfa-2 { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); } .bfa-g3 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); } .bfa-g2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); align-items: start; } .bfa-tg { display: inline-flex; align-items: center; min-height: 26px; padding: 0 12px; border-radius: 99px; font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap; max-width: 100%; background: var(--field); border: var(--bw) solid var(--stroke); color: var(--text); vertical-align: middle; } .bfa-tg.ok { color: var(--ok); } .bfa-tg.warn { color: #d98a1c; } .bfa-tg.bad { color: #e5485f; } .bfa-tg.info { color: var(--accent); } .bf:is([data-theme=midnight],[data-theme=hyperos]) .bfa-tg.warn { color: #ffb454; } .bf:is([data-theme=midnight],[data-theme=hyperos]) .bfa-tg.bad { color: #ff7b8a; } .bfa-ok { color: var(--ok); } .bfa-bad { color: #e5485f; } .bf:is([data-theme=midnight],[data-theme=hyperos]) .bfa-bad { color: #ff7b8a; } .bfa-av { flex: none; display: inline-grid; place-items: center; border-radius: 50%; font-family: var(--font-d); font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); } .chip .bfa-av { box-shadow: none; } .bfa-sdot { flex: none; width: 12px; height: 12px; border-radius: 50%; } .bfa-cnt { min-width: 22px; height: 20px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: 99px; font-size: 11px; font-weight: 800; background: var(--field); color: var(--text); text-shadow: none; } .chip.on .bfa-cnt { background: rgba(255,255,255,.3); color: inherit; } .bfa-chips { display: flex; gap: 8px; padding: 2px 2px 6px; } .bfa-msg { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; } .bfa-msg.clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .bfa-mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 13px; min-width: 0; overflow-wrap: anywhere; } .bfa-lnk { background: none; border: 0; padding: 0 2px; color: var(--accent); text-decoration: underline; font: inherit; cursor: pointer; } .bfa-fold { width: 100%; background: none; border: 0; padding: 4px 0; cursor: pointer; text-align: left; font: inherit; color: inherit; } .bfa-toast { max-width: calc(100vw - 24px); } .bfa-toast-m { overflow-wrap: anywhere; } /* Estado (portada + sysinfo): el texto va SIEMPRE con el color de texto del tema, no "on-bg". */ .bfa-status { display: flex; align-items: center; gap: 14px; border-radius: var(--r-lg); margin-bottom: 16px; } .bfa-status-t { color: var(--text); } .bfa-okdot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ok) 28%, transparent), 0 0 18px var(--ok); animation: bfaOk 2.2s ease-in-out infinite; } .bfa-status.warn .bfa-okdot, .bfa-hero.warn .bfa-okdot { background: #ffb454; box-shadow: 0 0 0 5px rgba(255,180,84,.28), 0 0 18px #ffb454; } @keyframes bfaOk { 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--ok) 6%, transparent), 0 0 26px var(--ok); } } /* Portada (celular) */ .bfa-hub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .bfa-tile { position: relative; align-items: flex-start; justify-content: flex-start; text-align: left; padding: 16px; min-height: 132px; width: 100%; border-radius: var(--r-lg); color: var(--text); font: inherit; cursor: pointer; } .bfa-tile .thumb { width: 44px; height: 44px; } .bfa-tile-n { margin-top: 6px; overflow-wrap: anywhere; } .bfa-tile .small { overflow-wrap: anywhere; } .bfa-badge { position: absolute; top: 12px; right: 12px; min-width: 26px; height: 22px; padding: 0 8px; display: grid; place-items: center; border-radius: 99px; font-size: 12px; font-weight: 800; background: var(--btn-bg); color: var(--on-accent); } @media (min-width: 640px) { .bfa-hub { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Escritorio: menú lateral propio del admin */ .bfa-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; } .bfa-subnav { display: none; } .bfa-sec-t { margin-bottom: -4px; } @media (min-width: 1280px) { .bfa-grid { grid-template-columns: 236px minmax(0, 1fr); } .bfa-subnav { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: var(--r-lg); position: sticky; top: 20px; } .bfa-subnav .nav { width: 100%; text-align: left; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; } .bfa-narrow-only { display: none; } } .bfa-nav-l { overflow-wrap: anywhere; } /* Rutinas */ .bfa-wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 14px; } .bfa-wk .day { aspect-ratio: auto; min-height: 62px; flex-direction: column; display: flex; align-items: center; justify-content: center; gap: 2px; padding: 6px 0; font: inherit; color: inherit; cursor: pointer; } .bfa-wk .day .dot { bottom: 5px; } .bfa-dw { text-transform: capitalize; font-size: 11px; } .bfa-dn { font-family: var(--font-d); font-weight: 700; font-size: 18px; } .bfa-date { width: auto; min-height: 44px; height: 44px; flex: none; max-width: 170px; } /* Entrenadores */ .bfa-knobs { display: grid; gap: 16px; margin-top: 16px; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); } .bfa-pill-x { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 4px 4px 4px 12px; border-radius: 99px; font-size: 13px; background: var(--field); border: var(--bw) solid var(--stroke); overflow-wrap: anywhere; } .bfa-pill-x button { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 0; background: none; color: inherit; opacity: .7; cursor: pointer; } /* Parámetros */ .bfa-accw { overflow: hidden; } .bfa-acc { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 20px; min-height: 76px; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; } .bfa-acc-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .bfa-accbody { padding: 0 20px 8px; animation: rise .45s cubic-bezier(.2,.8,.2,1) both; } .bfa-prow { display: flex; align-items: center; gap: 12px 14px; min-height: 68px; padding: 12px 0; border-top: var(--bw) solid var(--stroke); flex-wrap: wrap; } .bfa-prow.col { flex-direction: column; align-items: stretch; } .bfa-prow-t { flex: 1 1 200px; } .bfa-chdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 8px; box-shadow: 0 0 8px var(--accent); vertical-align: middle; } .bfa-pctl { flex: 0 1 236px; min-width: 0; display: flex; align-items: center; gap: 8px; margin-left: auto; } .bfa-pctl.wide { flex: 1 1 280px; max-width: 360px; } .bfa-pctl .step { height: 48px; } .bfa-pctl .step button { width: 40px; height: 40px; } .bfa-pctl .seg { flex: 1 1 auto; min-width: 0; } .bfa-pctl .seg .chip { padding: 0 10px; } .bfa-unit { width: 34px; flex: none; text-align: center; } .bfa-sw { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--stroke); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 4px 10px -4px rgba(0,0,0,.4); transition: transform .25s; cursor: pointer; padding: 0; } .bfa-sw:hover { transform: scale(1.12); } .bfa-sw.on { outline: 3px solid var(--text); outline-offset: 2px; } .bfa-scope { max-width: 420px; } .bfa-seg-sm { padding: 4px; } .bfa-seg-sm .chip { min-height: 36px; padding: 0 14px; } /* Sysinfo */ .bfa-hero { position: relative; overflow: hidden; } .bfa-spark { display: block; margin-top: 8px; color: var(--accent); overflow: visible; } .bfa-gauge { text-align: center; } .bfa-ring { position: relative; width: 150px; height: 150px; margin: 12px auto 0; } .bfa-ring-v { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 22px; } .bfa-ring-v .num { font-size: 22px; overflow-wrap: anywhere; text-align: center; } .bfa-trow { display: grid; grid-template-columns: minmax(0, 1.4fr) auto minmax(40px, 1fr) auto; gap: 12px; align-items: center; min-height: 46px; padding: 6px 0; border-bottom: var(--bw) solid var(--stroke); } .bfa-trow:last-child { border-bottom: 0; } .bfa-trow.three { grid-template-columns: minmax(0, 1fr) auto auto; } .bfa-trow .bfa-sz { text-align: right; white-space: nowrap; } .bfa-m { height: 8px; } @media (max-width: 520px) { .bfa-trow { grid-template-columns: minmax(0, 1fr) auto auto; } .bfa-trow .bfa-m { display: none; } } /* Motor */ .bfa-mbars { display: flex; align-items: flex-end; gap: 4px; height: 150px; border-bottom: 1.5px solid var(--stroke); } .bfa-mbars.dense { gap: 1px; } /* Fotos */ .bfa-search { position: relative; display: flex; align-items: center; } .bfa-search > svg { position: absolute; left: 14px; pointer-events: none; } .bfa-search .field { padding-left: 42px; } .bfa-pgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); } .bfa-ph { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 8px; border-radius: var(--r-md); background: var(--field); border: var(--bw) solid var(--stroke); color: var(--text); font: inherit; text-align: left; cursor: pointer; min-width: 0; transition: transform .25s; } .bfa-ph:hover { transform: translateY(-3px); } .bfa-ph-img { width: 100%; aspect-ratio: 1 / 1; border-radius: calc(var(--r-md) - 6px); overflow: hidden; display: grid; place-items: center; background: rgba(0,0,0,.18); font-size: 30px; } .bfa-ph-i { width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; } .bfa-ph-n { overflow-wrap: anywhere; line-height: 1.25; } .bfa-drop { position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 1 / 1; max-height: 52vh; margin: 0 auto; display: grid; place-items: center; background: var(--field); border: 2px dashed var(--stroke); font-size: 48px; } .bfa-drop.on { border-color: var(--accent); } .bfa-drop-img { width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; } .bfa-drop-busy { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.55); color: #fff; font-weight: 700; font-size: 15px; } /* Servicios / filas de lista dentro de una tarjeta */ .bfa-lrow { padding: 14px 0; border-top: var(--bw) solid var(--stroke); } .bfa-lrow:first-child { border-top: 0; padding-top: 2px; } .bfa-lrow .bfa-actions { margin-top: 10px; } .bfa-swrow { min-height: 44px; } /* Logs */ .bfa-term { margin-top: 14px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12.5px; padding: 12px 14px; border-radius: var(--r-md); background: rgba(0,0,0,.28); border: var(--bw) solid var(--stroke); max-height: 520px; overflow: auto; overscroll-behavior: contain; } .bf:is([data-theme=xp],[data-theme=aqua],[data-theme=kde],[data-theme=frutiger],[data-theme=oneui]) .bfa-term { background: var(--field); } .bfa-logl { display: grid; grid-template-columns: 56px 48px minmax(0, 1fr); gap: 10px; padding: 5px 0; align-items: baseline; } .bfa-lmsg { overflow-wrap: anywhere; white-space: pre-wrap; } .bfa-lv { font-weight: 800; } .bfa-lv.info { color: var(--accent); } .bfa-lv.warn { color: #d98a1c; } .bfa-lv.error { color: #e5485f; } @media (max-width: 420px) { .bfa-logl { grid-template-columns: 48px minmax(0, 1fr); } .bfa-logl .bfa-lv { display: none; } } /* Acceso desde Configuración */ .bfa-link { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; border-radius: var(--r-lg); color: var(--text); font: inherit; text-align: left; cursor: pointer; } /* Densidad compacta (Admin → Parámetros → Interfaz) */ .bf[data-look-density="compact"] .bfa .bfa-card.pad-lg { padding: 14px; } .bf[data-look-density="compact"] .bfa .bfa-prow { min-height: 52px; padding: 8px 0; } .bf[data-look-density="compact"] .bfa .bfa-trow { min-height: 36px; } .bf[data-look-density="compact"] .bfa .bfa-actions { margin-top: 10px; } /* Animaciones y orbes */ .bf[data-look-orbs="off"] .bg i { display: none; } .bf[data-look-motion="reduced"] .bg i, .bf[data-look-motion="reduced"] .bfa-okdot, .bf[data-look-motion="reduced"] .btn.primary::after, .bf[data-look-motion="reduced"] .glass.live:hover::after { animation: none !important; } .bf[data-look-motion="off"] *, .bf[data-look-motion="off"] *::before, .bf[data-look-motion="off"] *::after { animation: none !important; transition: none !important; } /* Series de gráficos del admin: orden fijo validado (CVD + visión normal) con el validador de dataviz. Oscuro sobre #141a3a, claro sobre #f3f5fa; en claro el contraste bajo se compensa con leyenda + valores. */ .bf { --bfa-s1: #3987e5; --bfa-s2: #d95926; --bfa-s3: #9085e9; --bfa-s4: #c98500; --bfa-s5: #d55181; } .bf:is([data-theme=frutiger],[data-theme=kde],[data-theme=oneui],[data-theme=xp],[data-theme=aqua]) { --bfa-s1: #2a78d6; --bfa-s2: #eb6834; --bfa-s3: #6250d6; --bfa-s4: #eda100; --bfa-s5: #e87ba4; } .bfa-stk { gap: 2px; } .bfa-sparkw { position: relative; margin-top: 8px; cursor: crosshair; touch-action: pan-y; } .bfa-sparkw .bfa-spark { margin-top: 0; } .bfa-spdot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--glass-hi), 0 0 10px var(--accent); pointer-events: none; } .bfa-readout { margin-top: 14px; min-height: 18px; } .bfa-mbars { margin-top: 8px; } .bfa-bar { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; cursor: pointer; } .bfa-bar > i { flex: 1 1 auto; height: var(--h); border-radius: 4px 4px 0 0; } .bfa-mbars.dense .bfa-bar > i { border-radius: 2px 2px 0 0; } .bfa-mbars:hover .bfa-bar:not(.on) > i { opacity: .55; } .bfa-sz, .bfa-trow, .bfa-cnt, .bfa-badge, .bfa-readout, .tnum { font-variant-numeric: tabular-nums; } .bfa-seg-sm { display: inline-flex; } .bfa-seg-sm .chip { flex: none; } .bfa-status.live:hover { transform: translateY(-2px); } .bfa-prow.col .bfa-prow-t { flex: none; } .bfa-badge { background: var(--accent); color: #fff; text-shadow: none; box-shadow: 0 0 0 2px var(--glass-hi); } /* Hero de Sysinfo: el título nunca se aprieta; en angosto los controles bajan a su línea */ .bfa-hero-t { flex: 1 1 200px; } .bfa-hero-t .bfa-status-t { overflow-wrap: normal; word-break: normal; } .bfa-hero-c { flex: 0 0 auto; margin-left: auto; } .bfa-status-t { overflow-wrap: normal; word-break: normal; } /* ═════ Registro por invitación (mini tour): .bfj-* ═════ */ .bfj { position: relative; isolation: isolate; min-height: calc(100dvh / var(--bfz, 1)); display: flex; flex-direction: column; gap: 18px; padding: max(14px, var(--sat, env(safe-area-inset-top))) max(16px, var(--sar, env(safe-area-inset-right))) 0 max(16px, var(--sal, env(safe-area-inset-left))); max-width: 1180px; margin: 0 auto; } .bfj-aurora { position: fixed; inset: -25%; z-index: -1; pointer-events: none; opacity: .32; filter: blur(70px); background: conic-gradient(from 0deg at 50% 50%, var(--accent), transparent 25%, var(--accent2), transparent 55%, var(--o3, var(--accent)), transparent 85%, var(--accent)); animation: bfjSpin 38s linear infinite; } .bfj-top { display: flex; align-items: center; gap: 10px; animation: bfjIn .6s cubic-bezier(.2,.9,.25,1.05) backwards; } .bfj-top > .bold { color: var(--text-bg); text-shadow: var(--text-bg-shadow); } .bfj-mini { width: 34px; height: 34px; border-radius: 10px; box-shadow: 0 6px 16px -6px rgba(0,0,0,.5); } .bfj-lang { padding: 4px; flex: none; } .bfj-lang .chip { min-height: 34px; padding: 0 12px; font-size: 13px; flex: none; } .bfj-grid { flex: 1 1 auto; display: flex; flex-direction: column; gap: 18px; } .bfj-stage-wrap { perspective: 1100px; } .bfj-stage { position: relative; min-height: 290px; display: grid; place-items: center; padding: 22px 16px; border-radius: var(--r-lg); overflow: hidden; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .3s cubic-bezier(.2,.8,.2,1); animation: bfjStage .8s cubic-bezier(.2,.9,.25,1.06) backwards; } .bfj-stage .glass { -webkit-backdrop-filter: none; backdrop-filter: none; } .bfj-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(120% 80% at calc(50% + var(--ry, 0deg) * 6) 0%, rgba(255,255,255,.16), transparent 55%); } .bfj-copy { min-width: 0; display: flex; flex-direction: column; } .bfj-h { font-size: clamp(30px, 7.4vw, 46px); line-height: 1.06; letter-spacing: -.025em; text-wrap: balance; color: var(--text-bg); text-shadow: var(--text-bg-shadow); } .bfj-w { display: inline-block; animation: bfjWord .62s cubic-bezier(.2,.9,.25,1.1) backwards; animation-delay: calc(var(--w) * 65ms + 120ms); } .bfj-body { font-size: 17px; line-height: 1.5; color: var(--text-bg); opacity: .82; max-width: 34em; text-wrap: pretty; } .bfj-copy .eyebrow { color: var(--text-bg); opacity: .78; } .bfj-step > * { animation: bfjIn .55s cubic-bezier(.2,.9,.25,1.06) backwards; } .bfj-step > :nth-child(2) { animation-delay: 60ms; } .bfj-step > :nth-child(3) { animation-delay: 260ms; } .bfj-step > :nth-child(4) { animation-delay: 340ms; } .bfj-step > :nth-child(5) { animation-delay: 420ms; } .bfj-step.from-l > * { animation-name: bfjInL; } .bfj-demo { width: 100%; max-width: 440px; animation: bfjDemoR .6s cubic-bezier(.2,.9,.25,1.05) backwards; } .bfj-demo.from-l { animation-name: bfjDemoL; } .bfj-step-ic { width: 24px; height: 24px; border-radius: 8px; display: inline-grid; place-items: center; color: var(--on-accent); background: var(--btn-bg); } .bfj-ok { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; font-weight: 700; font-size: 14px; color: #fff; background: linear-gradient(135deg, #12b981, #3ddc97); box-shadow: 0 10px 24px -10px #12b981; animation: bfjPop .6s cubic-bezier(.2,.9,.3,1.5) backwards; } /* Héroe del paso 1: logo con anillos y chips flotando */ .bfj-hero { position: relative; width: min(280px, 78vw); aspect-ratio: 1; display: grid; place-items: center; } .bfj-logo { position: relative; z-index: 2; width: 44%; height: auto; border-radius: 28%; box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 22px 50px -14px var(--accent), 0 0 60px -10px var(--accent2); animation: bfjPop .9s cubic-bezier(.2,.9,.3,1.4) .1s backwards, bfjFloat 4.2s ease-in-out 1s infinite; } .bfj-ring { position: absolute; inset: 14%; border-radius: 50%; animation: bfjSpin 7s linear infinite; background: conic-gradient(from 0deg, transparent 0 8%, var(--accent) 20%, transparent 38%, var(--accent2) 62%, transparent 80%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); } .bfj-ring.r2 { inset: 2%; opacity: .55; animation-duration: 12s; animation-direction: reverse; } .bfj-pulse { position: absolute; inset: 27%; border-radius: 50%; border: 2px solid var(--accent); animation: bfjPulse 2.6s ease-out infinite; } .bfj-chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--text); background: var(--glass-hi); border: var(--bw) solid var(--stroke); box-shadow: 0 10px 22px -12px rgba(0,0,0,.5); animation: bfjPop .7s cubic-bezier(.2,.9,.3,1.5) backwards, bfjBob 5s ease-in-out infinite; } .bfj-chip svg { color: var(--accent); } .bfj-chip.c0 { left: -4%; top: 12%; animation-delay: .45s, 1.2s; } .bfj-chip.c1 { right: -6%; top: 22%; animation-delay: .55s, 2s; } .bfj-chip.c2 { left: 0; bottom: 14%; animation-delay: .65s, .6s; } .bfj-chip.c3 { right: -2%; bottom: 6%; animation-delay: .75s, 1.6s; } /* Elección de cuenta */ .bfj-choices { margin-top: 4px; } .bfj-google { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 58px; padding: 0 20px; border-radius: 99px; position: relative; overflow: hidden; background: #fff; color: #1f1f1f; border: 1px solid #dadce0; font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; box-shadow: 0 14px 30px -14px rgba(0,0,0,.55); transition: transform .25s cubic-bezier(.2,.9,.3,1.5), box-shadow .25s; } .bfj-google::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(66,133,244,.16) 50%, transparent 70%); translate: -100% 0; animation: bfjSheen 3.2s ease-in-out 1.2s infinite; } .bfj-google:hover { transform: translateY(-2px) scale(1.015); box-shadow: 0 18px 34px -14px rgba(0,0,0,.6); } .bfj-google:active { transform: scale(.97); } .bfj-google:disabled { opacity: .6; } .bfj-own { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border-radius: var(--r-md); background: var(--glass-hi); border: var(--bw) solid var(--stroke); color: var(--text); font: inherit; cursor: pointer; transition: transform .25s cubic-bezier(.2,.9,.3,1.5); } .bfj-own:hover { transform: translateY(-2px); } .bfj-own-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--on-accent); background: var(--btn-bg); } .bfj-form { padding: 16px; border-radius: var(--r-lg); background: var(--glass-hi); border: var(--bw) solid var(--stroke); } .bfj-form .small { color: var(--dim); } /* Puntos y barra de acciones */ .bfj-dots { display: flex; gap: 8px; margin-top: 6px; } .bfj-dots i { width: 8px; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--text-bg) 30%, transparent); transition: width .3s cubic-bezier(.2,.9,.3,1.3), background .25s; } .bfj-dots i.past { background: color-mix(in srgb, var(--accent) 55%, transparent); } .bfj-dots i.on { width: 28px; background: var(--accent); } .bfj-bar { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 8px; align-items: center; margin: 0 -16px; padding: 12px 16px calc(14px + var(--sab, env(safe-area-inset-bottom))); background: linear-gradient(to top, color-mix(in srgb, var(--glass-hi) 92%, transparent), transparent); } /* Demo: generador */ .bfj-gen { display: flex; align-items: center; gap: 16px; } .bfj-gen-ring { position: relative; flex: none; width: 112px; height: 112px; } .bfj-gen-v { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; } .bfj-gen-v .num { font-size: 30px; } .bfj-gen-v small { font-size: 11px; font-weight: 700; color: var(--dim); margin-top: 3px; } .bfj-gen-list { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 7px; } .bfj-gen-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--field); border: var(--bw) solid var(--stroke); font-size: 14px; opacity: .25; translate: 14px 0; transition: opacity .45s, translate .5s cubic-bezier(.2,.9,.3,1.4); } .bfj-gen-row.on { opacity: 1; translate: 0 0; } .bfj-gen-row .bold { overflow-wrap: anywhere; line-height: 1.2; } .bfj-gen-ic { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: var(--on-accent); background: var(--btn-bg); } /* Demo: pizarra con línea de escaneo */ .bfj-scan { position: relative; } .bfj-scanline { position: absolute; left: 4px; right: 4px; height: 3px; top: 10%; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--accent), transparent); box-shadow: 0 0 16px var(--accent); animation: bfjScan 2.4s ease-in-out infinite; pointer-events: none; } /* Final: confeti */ .bfj-done { position: relative; min-height: 220px; display: grid; place-items: center; } .bfj-done .bfx-tour-done { animation: bfjPop .8s cubic-bezier(.2,.9,.3,1.6) .15s backwards; } .bfj-confetti { position: absolute; inset: 0; pointer-events: none; } .bfj-confetti i { position: absolute; left: 50%; top: 50%; width: 9px; height: 15px; border-radius: 3px; background: var(--c); opacity: 0; animation: bfjBurst 1.6s cubic-bezier(.15,.7,.25,1) var(--dl) 1 backwards; } /* Escritorio: escena a la izquierda, texto a la derecha */ @media (min-width: 960px) { .bfj { padding-top: 24px; } .bfj-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 48px; } .bfj-stage { min-height: 500px; padding: 36px; } .bfj-hero { width: 340px; } .bfj-demo { max-width: 460px; } .bfj-bar { position: static; background: none; margin: 0; padding: 0 0 28px; justify-content: flex-end; max-width: none; } .bfj-bar .btn.primary { flex: 0 0 auto; min-width: 220px; } } @keyframes bfjSpin { to { rotate: 360deg; } } @keyframes bfjWord { from { opacity: 0; translate: 0 .55em; filter: blur(8px); } } @keyframes bfjIn { from { opacity: 0; translate: 26px 0; filter: blur(4px); } } @keyframes bfjInL { from { opacity: 0; translate: -26px 0; filter: blur(4px); } } @keyframes bfjDemoR { from { opacity: 0; translate: 50px 0; scale: .94; } } @keyframes bfjDemoL { from { opacity: 0; translate: -50px 0; scale: .94; } } @keyframes bfjStage { from { opacity: 0; scale: .92; translate: 0 24px; } } @keyframes bfjPop { from { opacity: 0; scale: .4; } } @keyframes bfjFloat { 50% { translate: 0 -8px; } } @keyframes bfjBob { 50% { translate: 0 -7px; } } @keyframes bfjPulse { from { scale: 1; opacity: .7; } to { scale: 1.75; opacity: 0; } } @keyframes bfjSheen { 0%, 60% { translate: -100% 0; } 100% { translate: 100% 0; } } @keyframes bfjScan { 0% { top: 8%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 88%; opacity: 0; } } @keyframes bfjBurst { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.3) rotate(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y) + 60px)) rotate(var(--r)); } } @media (prefers-reduced-motion: reduce) { .bfj *, .bfj *::before, .bfj *::after { animation: none !important; transition: none !important; } .bfj-gen-row { opacity: 1; translate: 0 0; } } /* Botones: barra fija abajo en celular, justo bajo el texto en escritorio */ .bfj-acts { display: none; } @media (max-width: 959px) { .bfj-stage { min-height: min(44dvh, 420px); } } @media (min-width: 960px) { .bfj-bar { display: none; } .bfj-acts { display: flex; gap: 10px; align-items: center; margin-top: 26px; animation: bfjIn .55s cubic-bezier(.2,.9,.25,1.06) .45s backwards; } .bfj-acts .btn.primary { flex: 0 0 auto; min-width: 220px; } .bfj { max-width: 1280px; padding-bottom: 32px; } .bfj-h { font-size: 56px; } .bfj-body { font-size: 19px; } .bfj-stage { min-height: 560px; } .bfj-hero { width: 380px; } .bfj-demo { max-width: 500px; } .bfj-copy .bfj-choices, .bfj-copy .bfj-form { max-width: 460px; } } .bfj-note { display: flex; align-items: flex-start; gap: 10px; max-width: 34em; padding: 12px 14px; border-radius: var(--r-md); font-size: 14px; line-height: 1.45; color: var(--text); background: var(--glass-hi); border: var(--bw) solid var(--stroke); } .bfj-note svg { flex: none; margin-top: 1px; color: var(--accent); } @media (min-width: 960px) { .bfj-demo { transform: scale(1.18); } .bfj-gen { gap: 22px; } } .bfj-peek { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 8px 2px; background: none; border: 0; font: inherit; font-weight: 700; font-size: 15px; color: var(--text-bg); text-shadow: var(--text-bg-shadow); cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 4px; } .bfj-peek svg { transition: translate .25s; } .bfj-peek:hover svg { translate: 4px 0; } /* ── CrossFit / HYROX ── */ .day .bfx-dotrow .dot.cf { background: #ff7a3c; box-shadow: 0 0 8px #ff7a3c; } .bfx-wod-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .bfx-wod-list li { display: grid; grid-template-columns: minmax(44px, auto) 1fr auto; gap: 10px; align-items: baseline; } .bfx-check { width: 26px; height: 26px; flex: none; border-radius: 8px; border: 2px solid var(--stroke); display: grid; place-items: center; color: var(--on-accent); transition: background .2s, border-color .2s; } .bfx-check.on { background: var(--accent); border-color: var(--accent); } /* overflow: clip y no hidden: los blobs se salen del borde y un overflow hidden igual se puede desplazar (foco, scrollIntoView) y la cabecera se va arriba. */ .bfx-restfull.bfx-wodfull { overflow: clip; } .bfx-wodfull .bfx-rf-time { display: flex; flex-direction: column; align-items: center; gap: 2px; } .bfx-wod-phase { font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: 13px; opacity: .9; } .bfx-wodfull.done .bfx-rf-water { filter: hue-rotate(-70deg) saturate(1.2); } .bfx-wod-card { max-height: 26vh; overflow-y: auto; gap: 6px; } .bfx-wod-laps { list-style: none; margin: 8px 0 0; padding: 0; width: 100%; max-height: 28vh; overflow-y: auto; display: grid; gap: 4px; } .bfx-wod-laps li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 4px 2px; border-bottom: 1px solid var(--stroke); } .bfx-wod-laps.static { max-height: none; margin: 0; } @media (prefers-reduced-motion: reduce) { .bfx-check { transition: none; } } /* ── Coach a tu medida: elección de IA, perfil, sugerencia del día, retos, cargas ── Sin backdrop-filter propio: viven dentro de una .glass (blur anidado = parches blancos). */ .bfx-aiperks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .bfx-aiperks li { display: flex; gap: 12px; align-items: center; opacity: 0; transform: translateY(6px); animation: bfxPerkIn .42s cubic-bezier(.23,1,.32,1) calc(.08s + var(--k) * .06s) forwards; } .bfx-aiperks li > .min0 { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; } .bfx-aiperks .ic-wrap, .bfx-chal .ic-wrap { width: 36px; height: 36px; flex: none; border-radius: 12px; display: grid; place-items: center; color: var(--on-accent, #fff); background: var(--btn-bg); } @keyframes bfxPerkIn { to { opacity: 1; transform: none; } } .bfx-trform .chip { min-height: 44px; } .bfx-lifts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; } /* Sin fondo propio: dentro del vidrio del tour, fondo de campo + input con el mismo fondo quedaba como un bloque oscuro. */ .bfx-lift { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 6px; border-radius: var(--r-sm); background: transparent; border: var(--bw) solid var(--stroke); transition: border-color .2s; } .bfx-lift:focus-within { border-color: var(--accent, #8ab4ff); } .bfx-lift .field { min-height: 36px; width: 100%; min-width: 0; font-size: 18px; font-weight: 700; padding: 0 2px; background: transparent !important; border: 0 !important; border-bottom: var(--bw) solid var(--stroke) !important; border-radius: 0 !important; box-shadow: none !important; color: inherit; text-align: left; } .bfx-lift .field::placeholder { font-weight: 500; font-size: 15px; opacity: .55; } .bfx-lift .field:focus { outline: none; border-bottom-color: var(--accent, #8ab4ff) !important; } .bfx-sugg, .bfx-chal { padding: 14px; border-radius: var(--r-md); background: var(--field); border: var(--bw) solid var(--stroke); } .bfx-sugg-list { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 6px; } .bfx-sugg-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; padding: 8px 0; border-bottom: var(--bw) solid var(--stroke); opacity: 0; animation: bfxPerkIn .36s cubic-bezier(.23,1,.32,1) calc(var(--k) * .05s) forwards; } .bfx-sugg-list li:last-child { border-bottom: 0; } /* fill backwards (no both/forwards): el FLIP mueve estas filas con transform inline y un fill final lo pisaría */ .bfx-chal-item { padding: 12px; border-radius: var(--r-sm); border: var(--bw) solid var(--stroke); animation: bfxRise .4s cubic-bezier(.23,1,.32,1) calc(var(--k) * .07s) backwards; } @keyframes bfxRise { from { opacity: 0; transform: translateY(6px); } } .bfx-chal-item.done { border-color: var(--ok, #3ddc97); } .bfx-chal-item.done .ic-wrap { background: var(--ok, #3ddc97); color: #06241a; } .bfx-chal-item.failed { opacity: .6; } @media (prefers-reduced-motion: reduce) { .bfx-aiperks li, .bfx-sugg-list li, .bfx-chal-item { animation: none; opacity: 1; transform: none; } } .bfx-sedit-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 8px; align-items: center; } .bfx-sedit-row .field { min-height: 40px; width: 100%; min-width: 0; font-size: 16px; padding: 0 8px; } .bfx-sedit-row label { min-width: 0; } /* ── Coach: movimiento (solo transform/opacity → compositor, fluido a 120 Hz) ── */ .bfx-sedit { padding: 12px; border-radius: var(--r-md); background: var(--field); border: var(--bw) solid var(--stroke); animation: bfxRise .42s cubic-bezier(.23,1,.32,1) calc(var(--k, 0) * .04s) backwards; } .bfx-sedit.fresh { animation: bfxPopIn .46s cubic-bezier(.34,1.4,.64,1) backwards; } .bfx-sedit.leaving, .bfx-chal-item.leaving { animation: bfxLeave .34s cubic-bezier(.32,0,.67,0) both; pointer-events: none; } @keyframes bfxLeave { 0% { opacity: 1; transform: none; } 30% { opacity: 1; transform: translateX(-6px) scale(1.01); } 100% { opacity: 0; transform: translateX(64px) scale(.92); } } .bfx-sedit-row { animation: bfxPopIn .32s cubic-bezier(.34,1.4,.64,1) backwards; } .bfx-sedit-row.leaving { animation: bfxOut .2s cubic-bezier(.4,0,1,1) both; } @keyframes bfxPopIn { from { opacity: 0; transform: scale(.94) translateY(6px); } to { opacity: 1; transform: none; } } @keyframes bfxOut { to { opacity: 0; transform: translateX(28px) scale(.96); } } .bfx-swap-in { animation: bfxPerkIn .34s cubic-bezier(.23,1,.32,1) both; } .bfx-press { transition: transform .14s cubic-bezier(.23,1,.32,1), opacity .2s; } .bfx-press:active:not(:disabled) { transform: scale(.96); } .bfx-chip-pop { transition: transform .18s cubic-bezier(.34,1.56,.64,1), background-color .2s, color .2s, border-color .2s; } .bfx-chip-pop:active { transform: scale(.94); } .bfx-chip-pop.on { animation: bfxChipOn .32s cubic-bezier(.34,1.56,.64,1); } @keyframes bfxChipOn { 40% { transform: scale(1.07); } } .bfx-chosen { animation: bfxChipOn .36s cubic-bezier(.34,1.56,.64,1); } .bfx-dim { opacity: .45; } /* sugerencia: entra al cargar o con "Otra idea"; se pliega/despliega sin tocar height */ .bfx-sugg-body { animation: bfxSuggIn .48s cubic-bezier(.23,1,.32,1) both; } @keyframes bfxSuggIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } } .bfx-sugg.swapping .bfx-sugg-body { opacity: .4; transform: translateX(-10px); transition: opacity .2s, transform .2s; } .bfx-sugg.used { animation: bfxUsed .5s cubic-bezier(.23,1,.32,1) both; } @keyframes bfxUsed { 40% { transform: scale(1.015); } to { transform: scale(.98); opacity: .7; } } .bfx-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .36s cubic-bezier(.23,1,.32,1); } .bfx-fold > div { overflow: hidden; min-height: 0; } .bfx-fold.open { grid-template-rows: 1fr; } .bfx-fold:not(.open) .bfx-sugg-list li { animation: none; opacity: 0; } .bfx-chev { transition: transform .3s cubic-bezier(.34,1.56,.64,1); } .bfx-okpop { display: inline-grid; place-items: center; animation: bfxOk .42s cubic-bezier(.34,1.8,.64,1) both; } @keyframes bfxOk { from { transform: scale(0.3) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } } .bfx-sugg-list li.applied { background: linear-gradient(90deg, color-mix(in srgb, var(--ok, #3ddc97) 14%, transparent), transparent); border-radius: 8px; transition: background .3s; } /* "pensando": tres barras que respiran mientras llega la respuesta */ .bfx-think { display: flex; flex-direction: column; gap: 10px; } .bfx-think i { display: block; height: 12px; border-radius: 99px; background: var(--stroke); transform-origin: left; animation: bfxThink 1.2s cubic-bezier(.45,0,.55,1) infinite; } .bfx-think i:nth-child(1) { width: 40%; } .bfx-think i:nth-child(2) { width: 85%; animation-delay: .12s; } .bfx-think i:nth-child(3) { width: 65%; animation-delay: .24s; } @keyframes bfxThink { 0%, 100% { opacity: .35; transform: scaleX(.92); } 50% { opacity: .9; transform: scaleX(1); } } /* Íconos: dos pasadas al aparecer y quietos (infinito = trabajo constante en el teléfono); "pensando" sí sigue. */ .bfx-spark-ic svg { animation: bfxSpark 2.4s cubic-bezier(.45,0,.55,1) 2; transform-origin: center; } .bfx-thinking .bfx-spark-ic svg { animation: bfxSpark .9s cubic-bezier(.45,0,.55,1) infinite; } @keyframes bfxSpark { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(14deg) scale(1.12); } } /* Brillo con transform (compositor), no background-position: eso repintaba cada cuadro sobre el vidrio. */ .bfx-ai-shine { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; color: var(--accent, #8ab4ff); } .bfx-ai-shine::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform: translateX(-110%); animation: bfxShine 1.6s cubic-bezier(.45,0,.55,1) .4s 2; pointer-events: none; } @keyframes bfxShine { to { transform: translateX(110%); } } /* retos: barra con resorte, contador que salta, aceptar = pop + chispas, cumplido = celebración */ .bfx-cbar { height: 10px; border-radius: 99px; background: var(--field); border: var(--bw) solid var(--stroke); overflow: hidden; margin-top: 10px; } .bfx-cbar i { display: block; height: 100%; border-radius: inherit; transform-origin: left; background: linear-gradient(90deg, var(--accent2, #19d3c5), var(--ok, #3ddc97)); transition: transform .9s cubic-bezier(.34,1.25,.64,1); will-change: transform; } .bfx-chal-prog { animation: bfxPerkIn .4s cubic-bezier(.23,1,.32,1) both; } .bfx-tick { display: inline-block; animation: bfxChipOn .34s cubic-bezier(.34,1.56,.64,1); } .bfx-chal-ic { position: relative; } .burst-accept .bfx-chal-ic, .burst-done .bfx-chal-ic { animation: bfxChipOn .5s cubic-bezier(.34,1.8,.64,1); } .bfx-sparks { position: absolute; inset: 0; pointer-events: none; } .bfx-sparks b { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--ok, #3ddc97); opacity: 0; animation: bfxSparkOut .7s cubic-bezier(.23,1,.32,1) .05s both; } .burst-accept .bfx-sparks b { background: var(--accent, #8ab4ff); } @keyframes bfxSparkOut { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-26px) scale(.4); } } .bfx-pop-in { animation: bfxPopIn .4s cubic-bezier(.34,1.3,.64,1) both; } .bfx-pop-out { animation: bfxLeave .34s cubic-bezier(.32,0,.67,0) both; } @media (prefers-reduced-motion: reduce) { .bfx-sedit, .bfx-sedit.fresh, .bfx-sedit-row, .bfx-swap-in, .bfx-sugg-body, .bfx-sugg.used, .bfx-okpop, .bfx-think i, .bfx-spark-ic svg, .bfx-ai-shine, .bfx-chal-prog, .bfx-tick, .bfx-chal-ic, .bfx-sparks, .bfx-pop-in, .bfx-chip-pop.on, .bfx-chosen { animation: none !important; } .bfx-ai-shine::after { display: none; } .bfx-fold, .bfx-cbar i, .bfx-chev { transition: none; } } /* ── Admin → Motor → Cómo funciona la IA (solo transform/opacity en lo que se mueve) ── */ .bfa-brain-flow { display: flex; flex-direction: column; gap: 12px; } .bfa-bf-lane { display: flex; align-items: stretch; gap: 0; } .bfa-bf-node { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 12px 6px; border-radius: var(--r-md); background: var(--field); border: var(--bw) solid var(--stroke); animation: bfxPopIn .5s cubic-bezier(.34,1.4,.64,1) calc(.08s + var(--k) * .09s) backwards; } .bfa-bf-node b { font-size: 14px; } .bfa-bf-node .small { line-height: 1.3; } .bfa-bf-ic { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; color: var(--on-accent, #fff); background: var(--btn-bg); box-shadow: 0 8px 20px -10px var(--accent, #8ab4ff); } .bfa-bf-ic.sm { width: 32px; height: 32px; border-radius: 10px; flex: none; } .bfa-bf-link { position: relative; flex: 0 0 22px; align-self: center; height: 2px; background: var(--stroke); overflow: hidden; border-radius: 2px; } .bfa-bf-link i { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--accent, #8ab4ff), transparent); transform: translateX(-100%); animation: bfaFlowX 1.6s cubic-bezier(.45,0,.55,1) calc(var(--k) * .32s) infinite; } @keyframes bfaFlowX { to { transform: translateX(100%); } } .bfa-bf-fast { display: flex; align-items: center; gap: 6px; justify-content: center; color: var(--ok, #3ddc97); } .bfa-bf-bg { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); } .bfa-bf-chip { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--r-md); border: var(--bw) dashed var(--stroke); animation: bfxRise .45s cubic-bezier(.23,1,.32,1) .5s backwards; } .bfa-bf-chip .min0 { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; } .bfa-bf-chip.warn .bfa-bf-ic { background: linear-gradient(135deg, #ff9f45, #ffd23f); color: #2a1600; } .bfa-bf-chip.ok .bfa-bf-ic { background: linear-gradient(135deg, #12b981, #3ddc97); color: #06241a; } .bfa-bf-orbit { position: relative; width: 32px; height: 32px; flex: none; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--accent, #8ab4ff) 50%, transparent); animation: bfaSpin 6s linear infinite; } .bfa-bf-orbit i { position: absolute; top: -5px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--accent, #8ab4ff); box-shadow: 0 0 10px var(--accent, #8ab4ff); } .bfa-bf-orbit.lg { width: 44px; height: 44px; } @keyframes bfaSpin { to { transform: rotate(360deg); } } @media (max-width: 640px) { .bfa-bf-lane { flex-direction: column; } .bfa-bf-node { flex-direction: row; text-align: left; gap: 10px; padding: 10px 12px; } .bfa-bf-node b { flex: none; } .bfa-bf-link { flex: 0 0 16px; width: 2px; height: 16px; margin-left: 30px; align-self: flex-start; } .bfa-bf-link i { background: linear-gradient(180deg, transparent, var(--accent, #8ab4ff), transparent); transform: translateY(-100%); animation-name: bfaFlowY; } } @keyframes bfaFlowY { to { transform: translateY(100%); } } .bfa-br-tile { display: flex; flex-direction: column; gap: 6px; padding: 16px; animation: bfxPopIn .5s cubic-bezier(.34,1.4,.64,1) calc(.2s + var(--k) * .07s) backwards; } .bfa-br-tile .ic-wrap { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--on-accent, #fff); background: var(--btn-bg); } .bfa-br-tile .num { font-size: 26px; } .bfa-bbar { display: block; height: 8px; border-radius: 99px; background: var(--field); border: var(--bw) solid var(--stroke); overflow: hidden; min-width: 0; } .bfa-bbar i { display: block; height: 100%; border-radius: inherit; transform-origin: left; background: linear-gradient(90deg, var(--accent, #8ab4ff), var(--accent2, #19d3c5)); transition: transform .9s cubic-bezier(.34,1.2,.64,1); } .bfa-bbar.ok i { background: linear-gradient(90deg, #12b981, #3ddc97); } .bfa-bbar.warn i { background: linear-gradient(90deg, #ff9f45, #ffd23f); } .bfa-bbar.empty i { opacity: .25; } .bfa-cov { display: grid; grid-template-columns: minmax(84px, auto) repeat(3, minmax(0, 1fr)); gap: 6px 10px; align-items: center; margin-top: 12px; } .bfa-cov-h { text-align: center; } .bfa-cov-z, .bfa-cov-c { animation: bfxRise .4s cubic-bezier(.23,1,.32,1) calc(var(--k) * .035s) backwards; } .bfa-cov-c { display: flex; align-items: center; gap: 8px; min-width: 0; } .bfa-cov-c .bfa-bbar { flex: 1 1 auto; } .bfa-cov-c b { flex: none; font-size: 12px; min-width: 18px; text-align: right; } .bfa-cov-c.live .bfa-bbar { box-shadow: 0 0 0 1px var(--accent, #8ab4ff), 0 0 12px -2px var(--accent, #8ab4ff); } .bfa-cov-c.live .bfa-bbar i { animation: bfxThink 1s cubic-bezier(.45,0,.55,1) infinite; } .bfa-src { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: var(--field); gap: 2px; } .bfa-src b { flex: 0 0 var(--w); transform-origin: left; animation: bfxGrowX .8s cubic-bezier(.23,1,.32,1) calc(.2s + var(--k) * .12s) backwards; } @keyframes bfxGrowX { from { transform: scaleX(0); } } .bfa-src .s-seed, .bfa-lg-seed { --c: var(--bfa-s2, #19d3c5); } .bfa-src .s-seed { background: var(--c); } .bfa-src .s-ai, .bfa-lg-ai { --c: var(--bfa-s1, #8ab4ff); } .bfa-src .s-ai { background: var(--c); } .bfa-src .s-user, .bfa-lg-user { --c: var(--bfa-s3, #3ddc97); } .bfa-src .s-user { background: var(--c); } .bfa-brain-grow { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--r-md); background: var(--field); border: var(--bw) solid var(--stroke); flex-wrap: wrap; } .bfa-2c { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); } .bfa-br-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--field); border: var(--bw) solid var(--stroke); animation: bfxRise .4s cubic-bezier(.23,1,.32,1) calc(var(--k) * .05s) backwards; } .bfa-br-meter { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; animation: bfxRise .4s cubic-bezier(.23,1,.32,1) calc(var(--k) * .04s) backwards; } @media (prefers-reduced-motion: reduce) { .bfa-bf-node, .bfa-bf-chip, .bfa-br-tile, .bfa-cov-z, .bfa-cov-c, .bfa-src b, .bfa-br-row, .bfa-br-meter, .bfa-bf-orbit, .bfa-bf-link i, .bfa-cov-c.live .bfa-bbar i { animation: none !important; } .bfa-bbar i { transition: none; } } /* Resumen: perfil de entrenamiento pendiente */ .bfx-tpend { animation: bfxPopIn .5s cubic-bezier(.34,1.3,.64,1) .1s backwards; } .bfx-tpend.leaving { animation: bfxLeave .36s cubic-bezier(.32,0,.67,0) both; pointer-events: none; } .bfx-tpend-ic { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; color: var(--on-accent, #fff); background: var(--btn-bg); animation: bfxSpark 2.8s cubic-bezier(.45,0,.55,1) .6s 2; } .bfx-tpend-dots { display: flex; gap: 6px; } .bfx-tpend-dots i { width: 22px; height: 6px; border-radius: 99px; background: var(--stroke); transform-origin: left; } .bfx-tpend-dots i.on { background: linear-gradient(90deg, var(--accent, #8ab4ff), var(--accent2, #19d3c5)); animation: bfxGrowX .5s cubic-bezier(.34,1.4,.64,1) calc(.3s + var(--k) * .08s) backwards; } @media (prefers-reduced-motion: reduce) { .bfx-tpend, .bfx-tpend-ic, .bfx-tpend-dots i.on { animation: none !important; } } /* Reglas de contraseña en vivo */ .bfx-pwr { display: flex; flex-direction: column; gap: 8px; padding: 2px 2px 4px; } .bfx-pwr ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .bfx-pwr li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; line-height: 1.35; opacity: .72; transition: opacity .2s; } .bfx-pwr li.ok { opacity: 1; } .bfx-pwr li.bad { opacity: 1; color: #ff7b8a; } .bfx-pwr-ic { width: 20px; height: 20px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid currentColor; opacity: .7; transition: background-color .2s, border-color .2s, opacity .2s; } .bfx-pwr-ic i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; } .bfx-pwr li.ok .bfx-pwr-ic { background: var(--ok, #3ddc97); border-color: var(--ok, #3ddc97); color: #06241a; opacity: 1; animation: bfxChipOn .38s cubic-bezier(.34,1.8,.64,1); } .bfx-pwr li.ok .bfx-pwr-ic svg { animation: bfxOk .4s cubic-bezier(.34,1.8,.64,1) both; } .bfx-pwr-meter { display: flex; align-items: center; gap: 10px; } .bfx-pwr-bar { display: flex; gap: 4px; flex: 1 1 auto; max-width: 160px; } .bfx-pwr-bar i { flex: 1; height: 6px; border-radius: 99px; background: var(--stroke); transform-origin: left; } .bfx-pwr-bar i.on { animation: bfxGrowX .35s cubic-bezier(.34,1.4,.64,1) backwards; } .bfx-pwr-bar.s1 i.on { background: #ff7b8a; } .bfx-pwr-bar.s2 i.on { background: #ffb02e; } .bfx-pwr-bar.s3 i.on, .bfx-pwr-bar.s4 i.on { background: var(--ok, #3ddc97); } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .bfx-pwr li.ok .bfx-pwr-ic, .bfx-pwr li.ok .bfx-pwr-ic svg, .bfx-pwr-bar i.on { animation: none; } } /* Aviso sin conexión (BfOfflineBar): píldora arriba, no atrapa toques. Sin fill-mode: nada deja transform pegado. */ .bfx-offbar { position: fixed; left: 50%; transform: translateX(-50%); top: calc(var(--sat, env(safe-area-inset-top)) + 8px); z-index: 90; padding: 6px 14px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; max-width: calc(100vw - 24px); overflow: hidden; text-overflow: ellipsis; pointer-events: none; animation: bfx-offin .25s ease-out; } @keyframes bfx-offin { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } } /* Timer a pantalla completa y barra de descanso: salida animada (la entrada ya existía). */ @keyframes bfx-rf-out { from { opacity: 1; clip-path: circle(150% at 50% 92%); } to { opacity: 0; clip-path: circle(0% at 50% 92%); } } .bfx-restfull.closing { animation: bfx-rf-out 360ms cubic-bezier(.5, 0, .75, 0) both; pointer-events: none; } @keyframes bfx-rb-out { to { opacity: 0; transform: translateY(18px) scale(.96); } } .bfx-restbar.closing { animation: bfx-rb-out 260ms cubic-bezier(.4, 0, 1, 1) both; pointer-events: none; } /* Interruptor "Animaciones" de Configuración (data-bf-anim="off" en ): mismo efecto que prefers-reduced-motion. */ html[data-bf-anim="off"] .bf *, html[data-bf-anim="off"] .bf *::before, html[data-bf-anim="off"] .bf *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } html[data-bf-anim="off"] ::view-transition-old(root), html[data-bf-anim="off"] ::view-transition-new(root) { animation: none; } html[data-bf-anim="off"] :is(.bfx-restfull, .bfx-rf-blobs i, .bfx-rf-orb, .bfx-rf-wave, .bfx-rf-bubbles b, .bfx-rf-time .num) { animation: none !important; } /* Morph barra ↔ pantalla completa del timer: la capa de fondo (.bfx-rf-scrim) es la que se mueve (transform, ver bfMorph en index.html); sin backdrop-filter ni clip-path animados. Estas reglas pisan a las anteriores del mismo selector. */ .bfx-restfull { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; } .bfx-restfull.closing { animation: none; pointer-events: none; } .bfx-rf-scrim { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; will-change: transform; background: color-mix(in srgb, var(--rf-scrim) 96%, transparent); } .bfx-restfull > :not(.bfx-rf-scrim) { position: relative; z-index: 1; } .bfx-restbar.closing { animation: bfx-rb-out 150ms ease-in both; } @keyframes bfx-rb-out { to { opacity: 0; } } .bfx-restbar.from-full { animation: toastin 380ms cubic-bezier(.2,.9,.3,1.25) 170ms both; } /* ── Cierre de la sesión (estiramiento + cardio opcional) ── */ .bfx-cl { position: relative; overflow: hidden; transition: box-shadow 500ms ease, border-color 500ms ease; } .bfx-cl.complete { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ok) 55%, transparent), 0 14px 36px -16px var(--ok); } .bfx-cl-badge { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 14px; color: var(--on-accent); background: linear-gradient(145deg, var(--accent), var(--accent2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 8px 18px -8px var(--accent); transition: background 400ms ease, transform 400ms cubic-bezier(.2,.9,.3,1.5); } .bfx-cl.complete .bfx-cl-badge { background: linear-gradient(145deg, var(--ok), var(--accent2)); animation: bfx-cl-pop 520ms cubic-bezier(.2,.9,.3,1.6); } .bfx-cl-sum { animation: bfx-cl-fade 380ms ease both; } .bfx-cl-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .bfx-cl-seg { position: relative; flex: none; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: var(--r-pill); background: var(--field); border: var(--bw) solid var(--stroke); box-shadow: inset 0 2px 6px rgba(0,0,0,.14); isolation: isolate; } .bfx-cl-seg button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 62px; height: 38px; padding: 0 12px; border-radius: var(--r-pill); font-weight: 600; font-size: 14px; opacity: .72; transition: opacity 250ms, transform 200ms cubic-bezier(.2,.9,.3,1.5), color 250ms; } .bfx-cl-seg button:active { transform: scale(.92); } .bfx-cl-seg button.on { opacity: 1; color: var(--on-accent); text-shadow: var(--btn-ts); } .bfx-cl-thumb { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: var(--r-pill); background: var(--btn-bg); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 8px 18px -8px var(--accent); transform: translateX(calc(var(--pos) * 100%)); opacity: 1; transition: transform 380ms cubic-bezier(.3,1.4,.5,1), opacity 220ms ease, background 300ms; } .bfx-cl-seg.none .bfx-cl-thumb { opacity: 0; } .bfx-cl-seg.yes .bfx-cl-thumb { background: linear-gradient(145deg, var(--ok), var(--accent2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 8px 18px -8px var(--ok); } .bfx-cl-tick { display: inline-grid; width: 0; overflow: hidden; opacity: 0; transition: width 260ms cubic-bezier(.3,1.4,.5,1), opacity 200ms; } .bfx-cl-seg button.on .bfx-cl-tick { width: 18px; opacity: 1; } .bfx-cl-fold { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 520ms cubic-bezier(.3,1,.4,1), opacity 380ms ease; } .bfx-cl-fold.open { grid-template-rows: 1fr; opacity: 1; } .bfx-cl-fold:not(.open) { margin-block: -6px; } .bfx-cl-inner { overflow: hidden; min-height: 0; } .bfx-cl-body { padding-top: 4px; gap: 14px; } .bfx-cl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .bfx-cl-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 84px; padding: 10px 6px; border-radius: 18px; text-align: center; background: var(--glass); border: var(--bw) solid var(--stroke); box-shadow: inset 0 1px 0 var(--hi); transition: transform 260ms cubic-bezier(.2,.9,.3,1.5), box-shadow 300ms, background 300ms, color 300ms; } .bfx-cl-fold:not(.open) .bfx-cl-tile { transform: translateY(10px) scale(.92); } .bfx-cl-fold.open .bfx-cl-tile { animation: bfx-cl-tile 520ms cubic-bezier(.2,.9,.3,1.4) both; animation-delay: calc(var(--k, 0) * 55ms + 120ms); } .bfx-cl-tile:active { transform: scale(.94); } .bfx-cl-ic { font-size: 26px; line-height: 1; transition: transform 380ms cubic-bezier(.2,.9,.3,1.8); } .bfx-cl-nm { font-size: 12px; font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; } .bfx-cl-tile.on { background: var(--btn-bg); color: var(--on-accent); text-shadow: var(--btn-ts); border-color: rgba(255,255,255,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 12px 24px -10px var(--accent); } .bfx-cl-tile.on .bfx-cl-ic { transform: scale(1.22) rotate(-6deg); } .bfx-cl-rm { align-self: center; padding: 8px 14px; font-size: 13px; opacity: .65; border-radius: var(--r-pill); transition: opacity 200ms; } .bfx-cl-rm:hover { opacity: 1; } .bfx-cl-add { animation: bfx-cl-fade 380ms ease both; } @keyframes bfx-cl-tile { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } } @keyframes bfx-cl-pop { 0% { transform: scale(.7) rotate(-12deg); } 60% { transform: scale(1.18) rotate(4deg); } 100% { transform: none; } } @keyframes bfx-cl-fade { from { opacity: 0; translate: 0 4px; } } @media (max-width: 380px) { .bfx-cl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bfx-cl-seg button { min-width: 54px; } } @media (prefers-reduced-motion: reduce) { .bfx-cl *, .bfx-cl { animation: none !important; transition: none !important; } .bfx-cl-fold:not(.open) .bfx-cl-tile { transform: none; } } .bfx-cl-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border-radius: 16px; text-align: left; background: var(--glass); border: var(--bw) solid var(--stroke); box-shadow: inset 0 1px 0 var(--hi); transition: transform 200ms cubic-bezier(.2,.9,.3,1.5); } .bfx-cl-head:active { transform: scale(.98); } .bfx-cl-head .small { text-align: right; } .bfx-cl-chev { transition: transform 420ms cubic-bezier(.3,1.4,.5,1); } .bfx-cl-head.open .bfx-cl-chev { transform: rotate(180deg); }