/* Ranks road (Mi perfil) */
.fitness-levels { border-top:1px solid #dfe8e2; margin-top:12px; }
.fitness-levels > summary { min-height:48px; display:flex; gap:10px; align-items:center; justify-content:space-between; cursor:pointer; font-size:15px; font-weight:700; color:#245539; list-style:none; }
.fitness-levels > summary::-webkit-details-marker { display:none; }
.fitness-levels > summary::after { content:'+'; font-size:20px; font-weight:400; }
.fitness-levels[open] > summary::after { content:'−'; }
.fitness-levels summary span { margin-left:auto; max-width:60%; text-align:right; font-size:12px; font-weight:400; color:#5a7162; }
.fitness-levels summary:focus-visible { outline:3px solid #298355; outline-offset:2px; border-radius:4px; }
.fitness-level-road { list-style:none; padding:0; margin:4px 0 12px; display:grid; gap:5px; }
.fitness-level-road li { display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:10px; align-items:center; padding:8px; color:#64776a; border-radius:10px; font-size:13px; }
.fitness-level-road li > b { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:#edf2ee; font-size:13px; }
.fitness-level-road li > small { font-size:11px; white-space:nowrap; }
.fitness-level-road .is-earned { color:#376548; }
.fitness-level-road .is-earned > b { background:#dcecdf; color:#25623e; }
.fitness-level-road .is-current { color:#fff; background:linear-gradient(115deg,#194d35,#337c4f); font-weight:700; }
.fitness-level-road .is-current > b { background:#d7e9b3; color:#244f30; }

/* Amigos: short, visual, thumb-sized. Every button is at least 44px tall. */
.fitness-friends { display:grid; gap:12px; min-width:0; }
.friends-content { display:grid; gap:12px; min-width:0; }
.fitness-friends .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.fitness-friends button, .fitness-friends .friends-primary { min-height:44px; padding:0 14px; border-radius:12px; font:inherit; font-size:14px; font-weight:650; cursor:pointer; }
.fitness-friends button:disabled { opacity:.5; cursor:wait; }
.fitness-friends .friends-primary { display:inline-flex; align-items:center; justify-content:center; color:#fff; background:#26734d; border:1px solid #26734d; text-decoration:none; }
.fitness-friends .friends-secondary { color:#286343; background:#f2f7f3; border:1px solid #d6e4da; }
.fitness-friends :is(button,a,summary,input,select):focus-visible { outline:3px solid #76a344; outline-offset:2px; }
.friends-notice { color:#276344; font-size:13px; line-height:1.5; margin:0; }
.friends-notice:empty { display:none; }
.friends-notice.is-error { color:#9c3a35; }
.friends-privacy { color:#5e7164; font-size:12px; line-height:1.45; margin:0; }
.friends-empty { color:#50675a; font-size:13px; line-height:1.45; margin:0; }
.friends-avatar { display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:50%; background:#d7e7b8; color:#32532a; font-size:13px; font-weight:750; }

.friends-hero { display:flex; align-items:center; gap:10px; min-width:0; }
.friends-hero-identity { display:grid; gap:1px; min-width:0; flex:1; }
.friends-hero-identity strong { font-size:16px; color:#1f4430; overflow-wrap:anywhere; }
.friends-hero-identity small { font-size:12px; color:#5a7162; }
.fitness-friends .friends-edit-handle { width:44px; padding:0; border:1px solid #d6e4da; background:#fff; color:#2e6446; font-size:17px; }

.friends-add { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.friends-add input { width:100%; min-width:0; height:44px; box-sizing:border-box; padding:0 12px; border:1px solid #cbded1; border-radius:12px; background:#fff; color:#173e2b; font:inherit; font-size:15px; }

.friends-invite { border:1px solid #dbe7dc; border-radius:14px; background:#f7faf5; }
.friends-invite > summary { display:flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; cursor:pointer; list-style:none; color:#256044; font-size:14px; font-weight:650; }
.friends-invite > summary::-webkit-details-marker { display:none; }
.friends-invite-panel { display:grid; gap:10px; padding:0 14px 14px; }
.friends-steps { margin:0; padding-left:20px; display:grid; gap:4px; color:#3d5d48; font-size:13px; line-height:1.4; }
.friends-invite-actions { display:flex; flex-wrap:wrap; gap:8px; }
.friends-invite-actions > * { flex:1 1 90px; }
.friends-invite-actions > .friends-primary { flex-basis:100%; }
.friends-invite-status { font-size:12px; color:#3e6a4d; overflow-wrap:anywhere; }
.friends-invite-status:empty { display:none; }

.friends-requests > summary { min-height:44px; display:flex; align-items:center; cursor:pointer; font-size:14px; font-weight:650; color:#2f5a3f; }
.friends-requests[open] > summary { margin-bottom:4px; }
.friend-request { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; padding:8px 0; border-top:1px solid #e3ebe5; }
.friend-who { display:flex; align-items:center; gap:8px; min-width:0; }
.friend-who strong { min-width:0; overflow-wrap:anywhere; font-size:14px; color:#2c4f38; }
.friend-actions { display:flex; gap:6px; }
.friend-profile-link { display:flex; align-items:center; min-width:0; min-height:44px; color:inherit; text-decoration:none; border-radius:6px; }
.friend-profile-link:hover strong { text-decoration:underline; text-underline-offset:3px; }
.friend-avatar-link { justify-content:center; min-width:44px; }
.fitness-friends .friend-remove { border:1px solid transparent; background:none; color:#5d7466; font-size:13px; font-weight:400; }
.fitness-friends .friend-remove:hover { background:#f2f7f3; color:#2c4f38; }

.friends-board, .friends-challenges { display:grid; gap:10px; }
.friends-board { padding:14px; border-radius:16px; color:#eaf6ee; background:radial-gradient(ellipse at 100% 0,#386c54,transparent 70%),#173f30; }
.friends-board-heading { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.friends-board-heading h3, .friends-challenges > h3 { margin:0; font-size:16px; }
.friends-board-heading small { font-size:12px; color:#bcd6c5; }
.friends-ranking { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.friends-ranking li { display:grid; grid-template-columns:28px 44px minmax(0,1fr); gap:10px; align-items:center; padding:8px; border-radius:12px; background:#ffffff0d; }
.friends-ranking li.is-me { background:#ffffff1c; box-shadow:inset 0 0 0 1px #c6e3a55c; }
.friend-rank { text-align:center; font-size:19px; color:#d7ecb4; }
.friends-ranking .friends-avatar { justify-self:center; background:#2f5e45; color:#e2f3d0; }
.friends-ranking li.is-me .friends-avatar { background:#c6e3a5; color:#1f4430; }
.friend-identity { display:grid; gap:5px; min-width:0; }
.friend-line { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.friend-line strong { min-width:0; overflow-wrap:anywhere; font-size:14px; color:#f5fbf7; }
.friend-score { flex:none; font-size:15px; color:#d9f0a8; }
.friend-identity small { font-size:11.5px; color:#bcd6c5; }
.friends-ranking progress { width:100%; height:6px; display:block; appearance:none; border:0; border-radius:6px; overflow:hidden; background:#ffffff1f; }
.friends-ranking progress::-webkit-progress-bar { background:#ffffff1f; }
.friends-ranking progress::-webkit-progress-value { background:#b8d991; border-radius:6px; }
.friends-ranking progress::-moz-progress-bar { background:#b8d991; }
.friends-board .friends-empty { color:#cfe3d6; }

.friends-challenges > h3 { color:#1f4430; }
.challenge-card { display:grid; gap:10px; padding:14px; border:1px solid #dce6d6; border-radius:16px; background:#fff; }
.challenge-card.is-achieved { background:#f3f8e9; border-color:#abc873; }
.challenge-head { display:flex; align-items:center; gap:10px; }
.challenge-head > div { display:grid; gap:2px; min-width:0; }
.challenge-head strong { font-size:15px; color:#1f4430; }
.challenge-head small { font-size:12px; color:#5d7466; }
.challenge-icon { display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:12px; background:#eef5e6; font-size:20px; }
.challenge-state { margin:0; font-size:13px; color:#3e5c49; }
.challenge-duel { display:grid; gap:8px; }
.challenge-progress > div { display:flex; justify-content:space-between; gap:10px; font-size:13px; color:#3e5c49; }
.challenge-progress span { min-width:0; overflow-wrap:anywhere; }
.challenge-progress strong { flex:none; color:#1f4430; }
.challenge-progress progress { width:100%; height:9px; margin-top:4px; display:block; appearance:none; border:0; border-radius:6px; overflow:hidden; background:#edf2e9; }
.challenge-progress progress::-webkit-progress-bar { background:#edf2e9; }
.challenge-progress progress::-webkit-progress-value { background:#9bbf7c; border-radius:6px; }
.challenge-progress progress::-moz-progress-bar { background:#9bbf7c; }
.challenge-progress.is-me progress::-webkit-progress-value { background:#2d7d52; }
.challenge-progress.is-me progress::-moz-progress-bar { background:#2d7d52; }
.challenge-outcome { margin:0; font-size:13px; font-weight:650; color:#3f6f28; }
.challenge-actions { display:flex; flex-wrap:wrap; gap:8px; }
.challenge-options > summary { justify-content:flex-end; color:#5d7466; }
.challenge-options > summary, .challenge-create > summary { min-height:44px; display:flex; align-items:center; cursor:pointer; list-style:none; font-size:13px; color:#3a6049; }
.challenge-options > summary::-webkit-details-marker, .challenge-create > summary::-webkit-details-marker { display:none; }
.challenge-create > summary { justify-content:center; border:1px dashed #b9d0bf; border-radius:14px; font-size:14px; font-weight:650; color:#256044; }
.challenge-create[open] > summary { margin-bottom:10px; }
.challenge-form { display:grid; gap:14px; padding:14px; border:1px solid #dce6d6; border-radius:16px; background:#f8faf6; }
.challenge-form fieldset { margin:0; padding:0; border:0; min-width:0; }
.challenge-form legend, .challenge-field { padding:0; margin-bottom:8px; font-size:13px; font-weight:650; color:#355842; }
.challenge-kinds { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.challenge-kinds legend { grid-column:1 / -1; }
.challenge-kind, .challenge-day { position:relative; display:flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 6px; border:1px solid #d6e4da; border-radius:12px; background:#fff; color:#2f5a3f; font-size:13px; font-weight:650; cursor:pointer; text-align:center; }
.challenge-kind input, .challenge-day input { position:absolute; opacity:0; pointer-events:none; }
.challenge-kind.is-selected, .challenge-day.is-selected { border-color:#2d7d52; background:#e6f2e8; color:#1d5a3a; box-shadow:inset 0 0 0 1px #2d7d52; }
.challenge-kind:has(input:focus-visible), .challenge-day:has(input:focus-visible) { outline:3px solid #76a344; outline-offset:2px; }
.challenge-kind-icon { font-size:17px; }
.challenge-days { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.challenge-days legend { grid-column:1 / -1; }
.challenge-field { display:grid; gap:6px; margin:0; }
.challenge-form select, .challenge-goal input { width:100%; min-width:0; height:44px; box-sizing:border-box; padding:0 10px; border:1px solid #cbded1; border-radius:12px; background:#fff; color:#173e2b; font:inherit; font-size:15px; }
.challenge-goal { display:flex; align-items:center; gap:8px; }
.challenge-goal input { max-width:120px; }
.challenge-unit { font-size:14px; font-weight:600; color:#3e5c49; }
.challenge-form .friends-primary { justify-self:stretch; }

.friends-pitch { display:grid; gap:12px; padding:16px; border-radius:16px; background:linear-gradient(120deg,#eef4e2,#f5f9f6); border:1px solid #dfe8df; }
.friends-pitch h3 { margin:0; font-size:17px; color:#1f4430; }
.friends-benefits { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.friends-benefits li { display:flex; align-items:center; gap:10px; font-size:14px; color:#2f5a3f; }
.friends-benefits li > span:first-child { display:grid; place-items:center; flex:none; width:32px; height:32px; border-radius:10px; background:#fff; font-size:16px; }
.friends-pitch .friends-primary { justify-self:start; }
.fitness-friends .friends-refresh { justify-self:start; padding:0; border:0; background:none; color:#36684a; font-size:13px; }

/* The @usuario editor opens inline under the hero (pencil button). */
.friends-profile-form { display:grid; gap:12px; padding:14px; border:1px solid #dbe7dc; border-radius:14px; background:#fff; }
.fitness-friends .friends-field { display:grid; gap:6px; font-size:13px; font-weight:600; color:#365642; min-width:0; }
.fitness-friends .friends-field input { width:100%; box-sizing:border-box; min-width:0; height:44px; padding:9px 11px; border:1px solid #cbded1; border-radius:10px; background:#fff; color:#173e2b; font:inherit; font-size:15px; }
.fitness-friends .friends-optin { display:flex; align-items:center; gap:9px; font-size:13px; line-height:1.4; }
.fitness-friends .friends-optin input { width:22px; height:22px; min-height:22px; accent-color:#27734d; flex:none; }
.friends-form-actions { display:flex; flex-wrap:wrap; gap:8px; }
.friends-verify { display:inline-flex; align-items:center; min-height:44px; padding:9px 13px; border:1px solid #26734d; border-radius:10px; background:#26734d; color:white; font:inherit; font-size:13px; cursor:pointer; text-decoration:none; }
.friends-verify:focus-visible { outline:3px solid #76a344; outline-offset:3px; }
/* Comunidad (friends and challenges): one readable column on wide screens. */
#page-comunidad .fitness-friends { max-width:640px; margin:0 auto; padding:4px 0 28px; }
/* First visit: three numbered steps, the invitation buttons, then the direct add. */
.friends-start { display:grid; gap:12px; padding:16px; border:1px solid #dbe7dc; border-radius:16px; background:#f7faf5; }
.friends-start h3, .friends-add-section h3 { margin:0; font-size:16px; color:#1f4430; }
.friends-start .friends-steps { list-style:none; counter-reset:step; padding:0; margin:0; display:grid; gap:10px; }
.friends-start .friends-steps li { counter-increment:step; display:grid; grid-template-columns:32px minmax(0,1fr); column-gap:10px; align-items:center; }
.friends-start .friends-steps li::before { content:counter(step); grid-row:span 2; width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:#26734d; color:#fff; font-weight:750; font-size:14px; }
.friends-start .friends-steps strong { font-size:14.5px; color:#1f4430; }
.friends-start .friends-steps small { font-size:12.5px; color:#5a7162; }
.friends-start .friends-invite-panel { padding:0; }
.friends-or { margin:2px 0 0; font-size:13px; line-height:1.4; color:#3d5d48; }
.friends-add-section { display:grid; gap:10px; }
.friends-board-help { margin:-4px 0 2px; font-size:12px; color:#bcd6c5; }
.friends-privacy-note { margin:2px 0 0; font-size:12px; line-height:1.45; color:#5e7164; }
@media (max-width:350px) {
  .challenge-kinds { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .friends-ranking li { grid-template-columns:24px 44px minmax(0,1fr); gap:8px; }
  .friends-ranking .friends-avatar { width:32px; height:32px; }
}
@media (prefers-reduced-motion:no-preference) { .friends-board, .challenge-card, .friend-request { animation:friends-arrive .2s ease-out; } @keyframes friends-arrive { from { opacity:.7; transform:translateY(3px); } to { opacity:1; transform:none; } } }

/* Comunidad first visit (2026-10-10): one invite action; «Seguir perfiles públicos» folded until in use (fitness.js, follows.js). */
.community-more { margin-top:18px; border-top:1px solid #dfe7df; }
.community-more > summary { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; color:#1f4430; font-size:16px; font-weight:700; cursor:pointer; list-style:none; }
.community-more > summary::-webkit-details-marker { display:none; }
.community-more > summary::after { content:'+'; font-size:20px; font-weight:400; color:#4f6658; }
.community-more[open] > summary::after { content:'−'; }
.community-more > summary:focus-visible { outline:3px solid #268a64; outline-offset:2px; border-radius:8px; }
.community-more .follows-title { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Comunidad before the first friend (2026-10-10): a fictional ranking where «Tú» climbs to #1 (friends-demo.js).
   Fixed height and absolutely placed rows: the climb never moves anything around it. */
.friends-demo { --row:46px; --gap:6px; display:grid; gap:10px; padding:14px; border-radius:16px; color:#eaf6ee; background:radial-gradient(ellipse at 100% 0,#386c54,transparent 70%),#173f30; }
.friends-demo-head { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.friends-demo-head strong { font-size:15px; color:#f5fbf7; }
.friends-demo-head small { padding:3px 9px; border-radius:999px; background:#ffffff17; color:#d9f0a8; font-size:11px; font-weight:650; }
.friends-demo-board { position:relative; height:calc(4 * var(--row) + 3 * var(--gap)); transition:opacity .35s; }
.friends-demo-place { position:absolute; left:0; top:calc(var(--slot) * (var(--row) + var(--gap))); width:26px; height:var(--row); display:grid; place-items:center; font-size:18px; color:#d7ecb4; }
.friends-demo-row { position:absolute; inset:0 0 auto 34px; height:var(--row); box-sizing:border-box; display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:10px; align-items:center; padding:0 12px 0 8px; border-radius:12px; background:#ffffff0d; transform:translateY(calc(var(--place) * (var(--row) + var(--gap)))); transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.friends-demo-row.is-me { z-index:1; background:#2a5a43; box-shadow:inset 0 0 0 1px #c6e3a55c; }
.friends-demo .friends-avatar { width:30px; height:30px; font-size:11px; background:#2f5e45; color:#e2f3d0; }
.friends-demo .is-me .friends-avatar { background:#c6e3a5; color:#1f4430; }
.friends-demo-who { display:grid; gap:5px; min-width:0; }
.friends-demo-who strong { font-size:14px; color:#f5fbf7; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.friends-demo-days { display:flex; gap:3px; }
.friends-demo-days i { width:9px; height:9px; border-radius:3px; background:#ffffff1f; transition:background .3s; }
.friends-demo-days i.is-on { background:#b8d991; }
.friends-demo-score { display:flex; align-items:baseline; gap:3px; }
.friends-demo-score b { min-width:3ch; text-align:right; font-size:16px; color:#d9f0a8; font-variant-numeric:tabular-nums; }
.friends-demo-score small { font-size:11px; color:#bcd6c5; }
.friends-demo-compare { display:flex; flex-wrap:wrap; gap:6px; }
.friends-demo-compare > span { display:inline-flex; align-items:center; gap:5px; min-height:28px; padding:0 10px; border-radius:999px; background:#ffffff12; color:#e2f3d0; font-size:12.5px; font-weight:600; }
.friends-demo-compare i { font-style:normal; color:#d9f0a8; }
.friends-demo[data-fade] .friends-demo-board { opacity:0; }
.friends-demo[data-reset] :is(.friends-demo-board,.friends-demo-row,.friends-demo-days i) { transition:none; }
.friends-demo[data-reset] .friends-demo-board { opacity:0; }
.friends-pitch .friends-demo, .friends-start .friends-demo { margin-top:2px; }
@media (prefers-reduced-motion:no-preference) {
  .friends-demo.is-top .is-me { animation:friends-demo-win .9s ease-out .2s; }
  .friends-demo.is-top .friends-demo-place:first-child { animation:friends-demo-medal .9s ease-out .2s; }
  @keyframes friends-demo-win { 40% { box-shadow:inset 0 0 0 2px #d9f0a8, 0 0 18px #b8d99166; } }
  @keyframes friends-demo-medal { 40% { transform:scale(1.35); } }
}
@media (prefers-reduced-motion:reduce) { .friends-demo :is(.friends-demo-board,.friends-demo-row,.friends-demo-days i) { transition:none; } }
@media (max-width:350px) { .friends-demo { padding:12px; } .friends-demo-row { inset-inline-start:30px; gap:8px; padding-inline:6px 10px; } .friends-demo-place { width:24px; } }