/* Athlon · Comunidad, Perfil y sus pantallas interiores.
   Cargar después de style.css. Solo presentación; conserva rutas y datos. */

#screen:is([data-view="comunidad"], [data-view="socio"], [data-view="perfil"], [data-view="progreso"], [data-view="informes"], [data-view="ajustes"], [data-view="ejercicios"], [data-view="medidas"], [data-view="calendario"], [data-view="logros"], [data-view="fotos"], [data-view="habitos"], [data-view="clasificacion"]) {
  --social-ink: #182126;
  --social-muted: #5B6670;
  --social-line: #E1E5EA;
  --social-canvas: #F4F6F8;
  background: var(--social-canvas);
  color: var(--social-ink);
  font-size: 15px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

#screen:is([data-view="comunidad"], [data-view="socio"], [data-view="perfil"], [data-view="progreso"], [data-view="informes"], [data-view="ajustes"], [data-view="ejercicios"], [data-view="medidas"], [data-view="calendario"], [data-view="logros"], [data-view="fotos"], [data-view="habitos"], [data-view="clasificacion"]) :is(h1, h2, h3) {
  color: var(--social-ink);
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
#screen:is([data-view="comunidad"], [data-view="socio"], [data-view="perfil"], [data-view="progreso"], [data-view="informes"], [data-view="ajustes"], [data-view="ejercicios"], [data-view="medidas"], [data-view="calendario"], [data-view="logros"], [data-view="fotos"], [data-view="habitos"], [data-view="clasificacion"]) h1 { font-size: 30px; line-height: 1.12; font-weight: 650; }
#screen:is([data-view="comunidad"], [data-view="socio"], [data-view="perfil"], [data-view="progreso"], [data-view="informes"], [data-view="ajustes"], [data-view="ejercicios"], [data-view="medidas"], [data-view="calendario"], [data-view="logros"], [data-view="fotos"], [data-view="habitos"], [data-view="clasificacion"]) h2 { font-size: 21px; line-height: 1.25; font-weight: 650; }
#screen:is([data-view="comunidad"], [data-view="socio"], [data-view="perfil"], [data-view="progreso"], [data-view="informes"], [data-view="ajustes"], [data-view="ejercicios"], [data-view="medidas"], [data-view="calendario"], [data-view="logros"], [data-view="fotos"], [data-view="habitos"], [data-view="clasificacion"]) :is(.eyebrow, .sub) { color: var(--social-muted); }
#screen:is([data-view="comunidad"], [data-view="socio"], [data-view="perfil"], [data-view="progreso"], [data-view="informes"], [data-view="ajustes"], [data-view="ejercicios"], [data-view="medidas"], [data-view="calendario"], [data-view="logros"], [data-view="fotos"], [data-view="habitos"], [data-view="clasificacion"]) .eyebrow { font-size: 12px; line-height: 1.4; font-weight: 600; letter-spacing: .04em; }
#screen:is([data-view="comunidad"], [data-view="socio"], [data-view="perfil"], [data-view="progreso"], [data-view="informes"], [data-view="ajustes"], [data-view="ejercicios"], [data-view="medidas"], [data-view="calendario"], [data-view="logros"], [data-view="fotos"], [data-view="habitos"], [data-view="clasificacion"]) .sub { font-size: 15px; line-height: 1.5; margin-bottom: 20px; }
#screen:is([data-view="comunidad"], [data-view="socio"], [data-view="perfil"], [data-view="progreso"], [data-view="informes"], [data-view="ajustes"], [data-view="ejercicios"], [data-view="medidas"], [data-view="calendario"], [data-view="logros"], [data-view="fotos"], [data-view="habitos"], [data-view="clasificacion"]) .card {
  border: 1px solid var(--social-line);
  border-radius: 16px;
  padding: 16px;
  margin: 0 0 16px;
  background: #fff;
  box-shadow: none;
}
#screen:is([data-view="comunidad"], [data-view="socio"], [data-view="perfil"], [data-view="progreso"], [data-view="informes"], [data-view="ajustes"], [data-view="ejercicios"], [data-view="medidas"], [data-view="calendario"], [data-view="logros"], [data-view="fotos"], [data-view="habitos"], [data-view="clasificacion"]) :is(.button, .outline, .soft) { min-height: 44px; padding: 12px 16px; border-radius: 12px; font-size: 15px; font-weight: 600; line-height: 1.3; }
#screen:is([data-view="comunidad"], [data-view="socio"], [data-view="perfil"], [data-view="progreso"], [data-view="informes"], [data-view="ajustes"], [data-view="ejercicios"], [data-view="medidas"], [data-view="calendario"], [data-view="logros"], [data-view="fotos"], [data-view="habitos"], [data-view="clasificacion"]) .button { background: var(--social-ink); color: #fff; }
#screen:is([data-view="comunidad"], [data-view="socio"], [data-view="perfil"], [data-view="progreso"], [data-view="informes"], [data-view="ajustes"], [data-view="ejercicios"], [data-view="medidas"], [data-view="calendario"], [data-view="logros"], [data-view="fotos"], [data-view="habitos"], [data-view="clasificacion"]) .outline { background: #fff; color: var(--social-ink); border: 1px solid var(--social-line); }
#screen:is([data-view="comunidad"], [data-view="socio"], [data-view="perfil"], [data-view="progreso"], [data-view="informes"], [data-view="ajustes"], [data-view="ejercicios"], [data-view="medidas"], [data-view="calendario"], [data-view="logros"], [data-view="fotos"], [data-view="habitos"], [data-view="clasificacion"]) :is(button, input, textarea, select, summary):focus-visible { outline: 2px solid var(--social-ink); outline-offset: 3px; }
#screen:is([data-view="comunidad"], [data-view="socio"], [data-view="perfil"], [data-view="progreso"], [data-view="informes"], [data-view="ajustes"], [data-view="ejercicios"], [data-view="medidas"], [data-view="calendario"], [data-view="logros"], [data-view="fotos"], [data-view="habitos"], [data-view="clasificacion"]) :is(.notice, .wellness-notice, .wellness-small, .profile-demo-note) { color: var(--social-muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
#screen:is([data-view="comunidad"], [data-view="socio"], [data-view="perfil"], [data-view="progreso"], [data-view="informes"], [data-view="ajustes"], [data-view="ejercicios"], [data-view="medidas"], [data-view="calendario"], [data-view="logros"], [data-view="fotos"], [data-view="habitos"], [data-view="clasificacion"]) :is(.notice, .wellness-notice) { border: 1px solid var(--social-line); border-radius: 12px; padding: 12px; background: transparent; }

/* Comunidad: perfil compacto, dos acciones distintas y muro legible. */
#screen[data-view="comunidad"] .community-heading { margin-bottom: 16px; }
#screen[data-view="comunidad"] .community-heading h1 { margin: 0; }
#screen[data-view="comunidad"] .community-me { margin-bottom: 12px; border: 1px solid var(--social-line); border-radius: 16px; background: #fff; }
#screen[data-view="comunidad"] .community-me-top { gap: 12px; padding: 16px 12px 12px 16px; }
#screen[data-view="comunidad"] .community-me-top strong { color: var(--social-ink); font-size: 16px; font-weight: 650; }
#screen[data-view="comunidad"] .community-me-top small { margin-top: 4px; color: var(--social-muted); font-size: 12px; line-height: 1.4; }
#screen[data-view="comunidad"] .community-me-avatar { width: 44px; height: 44px; background: var(--social-canvas); color: var(--social-ink); font-size: 14px; font-weight: 600; }
#screen[data-view="comunidad"] .community-me-profile { flex: none; width: 44px; height: 44px; background: #fff; color: var(--social-ink); font-size: 20px; }
#screen[data-view="comunidad"] .community-me-counts { border-color: var(--social-line); }
#screen[data-view="comunidad"] .community-me-counts > * { flex-direction: column; align-items: center; justify-content: center; gap: 0; min-height: 60px; padding: 8px 4px; border-color: var(--social-line); }
#screen[data-view="comunidad"] .community-me-counts strong { font-size: 16px; color: var(--social-ink); font-weight: 600; }
#screen[data-view="comunidad"] .community-me-counts span { font-size: 12px; color: var(--social-muted); }
#screen[data-view="comunidad"] .community-write { margin-bottom: 12px; }
#screen[data-view="comunidad"] .community-write-open { min-height: 56px; border: 1px solid var(--social-line); border-radius: 12px; padding: 12px 16px; background: #fff; color: var(--social-muted); gap: 12px; }
#screen[data-view="comunidad"] .community-write-open span:nth-child(2) { font-size: 15px; line-height: 1.4; }
#screen[data-view="comunidad"] .community-write-open :is(span:first-child, b) { color: var(--social-ink); font-size: 21px; }
#screen[data-view="comunidad"] .community-write form { border-color: var(--social-line); border-radius: 16px; padding: 12px; }
#screen[data-view="comunidad"] .community-write textarea { min-height: 108px; background: #fff; border-color: var(--social-line); border-radius: 12px; padding: 12px; font-size: 16px; color: var(--social-ink); }
#screen[data-view="comunidad"] .community-write-actions { gap: 8px; margin-top: 12px; }
#screen[data-view="comunidad"] .community-write-actions button:first-child { min-height: 44px; padding: 8px 12px; color: var(--social-muted); font-size: 14px; }
#screen[data-view="comunidad"] .community-write-actions .button { min-height: 44px; padding: 12px 20px; font-size: 15px; }
#screen[data-view="comunidad"] .community-last { gap: 12px; padding: 14px 16px; margin-bottom: 24px; border: 1px solid var(--social-line); border-radius: 16px; background: #fff; color: var(--social-ink); }
#screen[data-view="comunidad"] .community-last > span { flex: none; width: 36px; height: 36px; border-radius: 12px; background: var(--social-canvas); color: var(--social-ink); font-size: 20px; }
#screen[data-view="comunidad"] .community-last div { min-width: 0; }
#screen[data-view="comunidad"] .community-last strong { font-size: 15px; line-height: 1.35; font-weight: 600; }
#screen[data-view="comunidad"] .community-last small { margin-top: 4px; color: var(--social-muted); font-size: 12px; }
#screen[data-view="comunidad"] .community-last > b { font-size: 20px; font-weight: 400; }
#screen[data-view="comunidad"] .community-feed-head { align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 12px; }
#screen[data-view="comunidad"] .community-feed-head h2 { font-size: 22px; }
#screen[data-view="comunidad"] .community-feed-head small { color: var(--social-muted); font-size: 12px; }
#screen[data-view="comunidad"] .community-feed-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 16px; border: 1px solid var(--social-line); border-radius: 12px; background: #fff; }
#screen[data-view="comunidad"] .community-feed-tabs button { min-height: 44px; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--social-muted); font-size: 14px; font-weight: 600; }
#screen[data-view="comunidad"] .community-feed-tabs button.active { background: var(--social-ink); color: #fff; }
#screen[data-view="comunidad"] .community-feed-tabs span { min-width: 20px; height: 20px; margin-left: 4px; background: var(--social-canvas); color: var(--social-ink); font-size: 12px; }
#screen[data-view="comunidad"] .community-feed-tabs .active span { background: #fff; }
#screen[data-view="comunidad"] .community-followed-list { gap: 8px; padding-bottom: 16px; }
#screen[data-view="comunidad"] .community-followed-list button { min-height: 44px; border-color: var(--social-line); background: #fff; color: var(--social-ink); font-size: 13px; padding: 6px 12px 6px 6px; }
#screen[data-view="comunidad"] .community-followed-list .community-avatar { width: 30px; height: 30px; font-size: 12px; }
#screen[data-view="comunidad"] .community-feed .community-post { padding: 0 0 12px; border: 1px solid var(--social-line); border-radius: 16px; margin-bottom: 16px; background: #fff; box-shadow: none; }
#screen[data-view="comunidad"] .community-post > :is(.community-author, h3, p, .community-stats, .community-exercises, .community-comments, .community-comment-form) { margin-left: 16px; margin-right: 16px; }
#screen[data-view="comunidad"] .community-post > .community-author { padding-top: 16px; margin-bottom: 16px; }
#screen[data-view="comunidad"] .community-author-link { min-height: 44px; gap: 12px; width: 100%; color: var(--social-ink); }
#screen[data-view="comunidad"] .community-author-link > span:last-child { min-width: 0; }
#screen[data-view="comunidad"] .community-avatar { width: 40px; height: 40px; background: var(--social-canvas); color: var(--social-ink); font-size: 13px; font-weight: 600; }
#screen[data-view="comunidad"] .community-author strong { font-size: 15px; font-weight: 600; }
#screen[data-view="comunidad"] .community-author small { font-size: 12px; color: var(--social-muted); line-height: 1.4; }
#screen[data-view="comunidad"] .community-post > small { display: block; margin: 0 16px 12px; color: var(--social-muted); font-size: 12px; }
#screen[data-view="comunidad"] .community-post > h3 { font-size: 20px; line-height: 1.25; margin-top: 0; margin-bottom: 8px; font-weight: 650; }
#screen[data-view="comunidad"] .community-post > p { margin-top: 0; margin-bottom: 16px; font-size: 15px; line-height: 1.5; color: var(--social-ink); overflow-wrap: anywhere; }
#screen[data-view="comunidad"] .community-post .community-stats { gap: 8px; padding: 12px 0; margin-top: 0; margin-bottom: 8px; border-color: var(--social-line); background: transparent; }
#screen[data-view="comunidad"] .community-stats span { min-width: 0; color: var(--social-muted); font-size: 12px; gap: 4px; }
#screen[data-view="comunidad"] .community-stats strong { color: var(--social-ink); font-size: 16px; line-height: 1.4; font-weight: 650; overflow-wrap: anywhere; }
#screen[data-view="comunidad"] .community-exercises { padding: 0 0 12px; }
#screen[data-view="comunidad"] .community-exercises > div { gap: 12px; padding: 8px 0; font-size: 14px; line-height: 1.35; }
#screen[data-view="comunidad"] .community-exercises b { min-width: 24px; color: var(--social-ink); font-size: 14px; font-weight: 600; }
#screen[data-view="comunidad"] .community-exercises span { min-width: 0; overflow-wrap: anywhere; }
#screen[data-view="comunidad"] .community-exercises span small { margin-top: 3px; font-size: 12px; color: var(--social-muted); }
#screen[data-view="comunidad"] .community-exercises > small { color: var(--social-muted); font-size: 12px; }
#screen[data-view="comunidad"] .community-photo { display: block; width: calc(100% - 32px); height: auto; max-height: 240px; margin: 0 16px 12px; border-radius: 12px; object-fit: contain; background: var(--social-canvas); }
#screen[data-view="comunidad"] .community-post .community-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0 12px; padding: 8px 0 0; border-color: var(--social-line); }
#screen[data-view="comunidad"] .community-actions button { min-height: 52px; padding: 6px 2px; border-radius: 8px; font-size: 15px; color: var(--social-ink); line-height: 1.35; font-weight: 600; }
#screen[data-view="comunidad"] .community-actions button span { display: block; margin-top: 2px; font-size: 12px; color: var(--social-muted); font-weight: 400; }
#screen[data-view="comunidad"] .community-actions button[aria-pressed="true"] { background: var(--social-canvas); }
#screen[data-view="comunidad"] .community-comments:empty { display: none; }
#screen[data-view="comunidad"] .community-comments p { padding: 12px; margin: 8px 0 0; background: var(--social-canvas); border-radius: 12px; color: var(--social-ink); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
#screen[data-view="comunidad"] .community-comments strong { font-weight: 600; }
#screen[data-view="comunidad"] .community-comment-form { gap: 8px; margin-top: 12px; }
#screen[data-view="comunidad"] .community-comment-form input { min-width: 0; min-height: 44px; border-color: var(--social-line); border-radius: 12px; color: var(--social-ink); font-size: 16px; padding: 10px 12px; }
#screen[data-view="comunidad"] .community-comment-form button { min-height: 44px; background: var(--social-ink); border-radius: 12px; padding: 10px 12px; font-size: 14px; }
#screen[data-view="comunidad"] .community-feed-empty { border: 1px solid var(--social-line); border-radius: 16px; background: #fff; padding: 24px 16px; }
#screen[data-view="comunidad"] .community-feed-empty strong { font-size: 16px; }
#screen[data-view="comunidad"] .community-feed-empty p { max-width: 100%; margin: 8px 0 16px; font-size: 15px; color: var(--social-muted); }
#screen[data-view="comunidad"] .community-feed-empty button { min-height: 44px; padding: 12px 16px; border-radius: 12px; background: var(--social-ink); font-size: 15px; }

/* Perfil: identidad, indicadores y seis accesos completos en filas. */
#screen[data-view="perfil"] .profile-top { align-items: center; margin: 0 0 20px; }
#screen[data-view="perfil"] .profile-settings { flex: none; width: 44px; height: 44px; border-color: var(--social-line); border-radius: 12px; color: var(--social-ink); font-size: 23px; }
#screen[data-view="perfil"] .member-card { border: 1px solid var(--social-line); border-radius: 16px; background: #fff; box-shadow: none; }
#screen[data-view="perfil"] .member-card-head { gap: 16px; padding: 20px 16px; }
#screen[data-view="perfil"] .member-photo { width: 64px; height: 64px; background: var(--social-canvas); color: var(--social-ink); font-size: 20px; font-weight: 600; }
#screen[data-view="perfil"] .member-photo:focus-within { outline: 2px solid var(--social-ink); outline-offset: 4px; }
#screen[data-view="perfil"] .member-photo i { width: 28px; height: 28px; background: var(--social-ink); }
#screen[data-view="perfil"] .member-name .member-kicker { color: var(--social-muted); font-size: 12px; letter-spacing: .04em; font-weight: 500; margin-bottom: 4px; }
#screen[data-view="perfil"] .member-name h2 { font-size: 23px; line-height: 1.2; margin-bottom: 6px; }
#screen[data-view="perfil"] .member-name p:last-child { font-size: 13px; color: var(--social-muted); line-height: 1.4; }
#screen[data-view="perfil"] .member-name p strong { color: var(--social-ink); font-weight: 600; }
#screen[data-view="perfil"] .member-metrics { border-color: var(--social-line); }
#screen[data-view="perfil"] .member-metrics button { gap: 6px; padding: 12px 4px; border-color: var(--social-line); color: var(--social-ink); }
#screen[data-view="perfil"] .member-metric-icon { width: 28px; height: 28px; border-radius: 8px; background: transparent; color: var(--social-muted); }
#screen[data-view="perfil"] .member-metric-icon.medal { background: transparent; color: #A17A22; }
#screen[data-view="perfil"] .member-metric-icon svg { width: 22px; height: 22px; }
#screen[data-view="perfil"] .member-metrics strong { font-size: 23px; line-height: 1.1; font-weight: 650; }
#screen[data-view="perfil"] .member-metrics small { font-size: 12px; line-height: 1.35; color: var(--social-muted); overflow-wrap: anywhere; }
#screen[data-view="perfil"] .member-ranking-link { min-height: 48px; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; color: var(--social-ink); font-size: 14px; font-weight: 600; text-align: left; line-height: 1.4; }
#screen[data-view="perfil"] .member-ranking-link span { flex: none; font-size: 19px; }
#screen[data-view="perfil"] .profile-demo-note { margin: 8px 0 20px; }
#screen[data-view="perfil"] .profile-remove-photo { min-height: 44px; padding: 8px 0; color: var(--social-muted); font-size: 12px; }
#screen[data-view="perfil"] .wellness-profile-highlight { gap: 12px; padding: 16px; margin: 0 0 24px; border: 1px solid var(--social-line); border-radius: 16px; background: #fff; color: var(--social-ink); }
#screen[data-view="perfil"] .wellness-profile-highlight > span { flex: none; width: 36px; height: 36px; border-radius: 12px; background: var(--social-canvas); font-size: 20px; }
#screen[data-view="perfil"] .wellness-profile-highlight div { min-width: 0; }
#screen[data-view="perfil"] .wellness-profile-highlight strong { font-size: 16px; font-weight: 600; line-height: 1.35; }
#screen[data-view="perfil"] .wellness-profile-highlight small { margin-top: 4px; color: var(--social-muted); font-size: 12px; }
#screen[data-view="perfil"] .wellness-profile-highlight b { font-size: 20px; font-weight: 400; }
#screen[data-view="perfil"] .profile-shortcuts { margin: 0 0 24px; padding: 0; border: 0; }
#screen[data-view="perfil"] .profile-shortcuts h2 { margin: 0 0 12px; font-size: 22px; }
#screen[data-view="perfil"] .profile-shortcut-grid { display: grid; grid-template-columns: 1fr; gap: 0; padding: 0 16px; border: 1px solid var(--social-line); border-radius: 16px; background: #fff; }
#screen[data-view="perfil"] .profile-shortcut-grid button { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) 16px; grid-template-rows: auto auto; column-gap: 12px; align-content: center; min-height: 76px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--social-line); border-radius: 0; background: transparent; color: var(--social-ink); }
#screen[data-view="perfil"] .profile-shortcut-grid button:last-child { border-bottom: 0; }
#screen[data-view="perfil"] .profile-shortcut-grid span { grid-column: 1; grid-row: 1 / 3; align-self: center; display: grid; place-items: center; width: 36px; height: 36px; margin: 0; border-radius: 12px; background: var(--social-canvas); color: var(--social-ink); font-size: 21px; }
#screen[data-view="perfil"] .profile-shortcut-grid span svg { width: 22px; height: 22px; }
#screen[data-view="perfil"] .profile-shortcut-grid strong { grid-column: 2; grid-row: 1; font-size: 15px; line-height: 1.4; font-weight: 600; }
#screen[data-view="perfil"] .profile-shortcut-grid small { grid-column: 2; grid-row: 2; font-size: 12px; color: var(--social-muted); margin-top: 3px; line-height: 1.4; }
#screen[data-view="perfil"] .profile-shortcut-grid button::after { content: "›"; grid-column: 3; grid-row: 1 / 3; align-self: center; color: var(--social-muted); font-size: 24px; font-weight: 400; }
#screen[data-view="perfil"] .profile-shortcut-grid [data-tab-go="informes"] > span { color: #365FD8; }
#screen[data-view="perfil"] .profile-shortcut-grid [data-tab-go="fotos"] > span { color: #CA6B5C; }
#screen[data-view="perfil"] .profile-shortcut-grid [data-tab-go="habitos"] > span { color: #188486; }
#screen[data-view="perfil"] .card.profile-history { padding: 16px; margin-bottom: 16px; border: 1px solid var(--social-line); border-radius: 16px; }
#screen[data-view="perfil"] .profile-history h2 { font-size: 21px; }
#screen[data-view="perfil"] .profile-history .eyebrow { margin-bottom: 4px; }
#screen[data-view="perfil"] > .outline.full { min-height: 48px; border-radius: 12px; font-size: 15px; }

/* Historial y ejercicios: se conservan todos los detalles y registros. */
#screen:is([data-view="perfil"], [data-view="ejercicios"]) :is(.profile-history-empty, .profile-feedback) { color: var(--social-muted); font-size: 14px; line-height: 1.5; }
#screen[data-view="perfil"] .profile-workout { border-color: var(--social-line); }
#screen[data-view="perfil"] .profile-workout summary { gap: 12px; min-height: 64px; padding: 16px 0; cursor: pointer; }
#screen[data-view="perfil"] .profile-workout-mark { width: 36px; height: 36px; border-radius: 12px; background: var(--social-canvas); color: var(--social-ink); font-size: 18px; }
#screen[data-view="perfil"] .profile-workout-main strong { font-size: 15px; font-weight: 600; }
#screen[data-view="perfil"] .profile-workout-main small { font-size: 12px; color: var(--social-muted); line-height: 1.5; }
#screen[data-view="perfil"] .profile-workout-chevron { color: var(--social-ink); font-size: 22px; }
#screen[data-view="perfil"] .profile-workout[open] .profile-workout-chevron { transform: rotate(180deg); }
#screen[data-view="perfil"] .profile-workout-stats { gap: 8px; padding: 12px; border-radius: 12px; background: var(--social-canvas); }
#screen[data-view="perfil"] .profile-workout-stats span { color: var(--social-muted); font-size: 12px; }
#screen[data-view="perfil"] .profile-workout-stats strong { color: var(--social-ink); font-size: 15px; }
#screen[data-view="perfil"] .profile-workout-exercises > div { padding: 12px 0; border-color: var(--social-line); }
#screen[data-view="perfil"] .profile-workout-exercises > div > span { min-width: 0; }
#screen[data-view="perfil"] .profile-workout-exercises strong { color: var(--social-ink); font-size: 14px; font-weight: 600; }
#screen[data-view="perfil"] .profile-workout-exercises small { color: var(--social-muted); font-size: 12px; line-height: 1.4; }
#screen[data-view="perfil"] .profile-feedback { background: var(--social-canvas); border-radius: 12px; padding: 12px; }
#screen[data-view="ejercicios"] .profile-exercise-link { gap: 12px; min-height: 76px; padding: 12px 0; border-color: var(--social-line); color: var(--social-ink); }
#screen[data-view="ejercicios"] .profile-exercise-link .exercise-figure { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 12px; background: var(--social-canvas); }
#screen[data-view="ejercicios"] .profile-exercise-link strong { font-size: 15px; font-weight: 600; }
#screen[data-view="ejercicios"] .profile-exercise-link small { color: var(--social-muted); font-size: 12px; line-height: 1.5; }
#screen[data-view="medidas"] .profile-measure-empty { padding: 24px 16px; }
#screen[data-view="medidas"] .profile-measure-empty > span { width: 56px; height: 56px; background: var(--social-canvas); color: var(--social-muted); }
#screen[data-view="medidas"] .profile-measure-empty p { color: var(--social-muted); font-size: 15px; line-height: 1.5; margin-bottom: 20px; }

/* Interiores: campos, gráficos, calendario y preferencias. */
#screen:is([data-view="progreso"], [data-view="ajustes"], [data-view="logros"], [data-view="fotos"], [data-view="habitos"]) .field { font-size: 13px; color: var(--social-ink); font-weight: 600; gap: 8px; }
#screen:is([data-view="progreso"], [data-view="ajustes"], [data-view="logros"], [data-view="fotos"], [data-view="habitos"]) :is(.field input, .field select, .setting-row select) { min-height: 48px; min-width: 0; max-width: 100%; border: 1px solid var(--social-line); border-radius: 12px; padding: 12px; background: #fff; color: var(--social-ink); font-size: 16px; }
#screen:is([data-view="ajustes"], [data-view="logros"], [data-view="habitos"]) .setting-row { gap: 16px; min-height: 64px; padding: 12px 0; border-color: var(--social-line); color: var(--social-ink); font-size: 15px; line-height: 1.4; }
#screen:is([data-view="ajustes"], [data-view="logros"], [data-view="habitos"]) .setting-row > span { min-width: 0; max-width: none; flex: 1; }
#screen:is([data-view="ajustes"], [data-view="logros"], [data-view="habitos"]) .setting-row small { display: block; color: var(--social-muted); font-size: 12px; font-weight: 400; line-height: 1.5; margin-top: 6px; }
#screen:is([data-view="ajustes"], [data-view="logros"], [data-view="habitos"]) .setting-row input[type="checkbox"] { flex: 0 0 24px; width: 24px; height: 24px; accent-color: var(--social-ink); }
#screen[data-view="ajustes"] .watch-connection-status { padding: 12px; border: 1px solid var(--social-line); border-radius: 12px; background: var(--social-canvas); }
#screen[data-view="ajustes"] .watch-connection-status span { color: var(--social-ink); font-size: 14px; font-weight: 600; }
#screen[data-view="ajustes"] .watch-connection-status small { color: var(--social-muted); font-size: 12px; line-height: 1.5; }
#screen[data-view="progreso"] .meta-grid { gap: 8px; margin-bottom: 16px; }
#screen[data-view="progreso"] .meta { border-color: var(--social-line); border-radius: 16px; padding: 12px 8px; background: #fff; }
#screen[data-view="progreso"] .meta span { font-size: 12px; color: var(--social-muted); }
#screen[data-view="progreso"] .meta strong { margin-top: 4px; font-size: 22px; font-weight: 650; color: var(--social-ink); }
#screen[data-view="progreso"] .progress-metric-tabs { gap: 4px; margin: 16px 0; }
#screen[data-view="progreso"] .progress-metric-tabs button { min-height: 44px; padding: 8px; border: 1px solid var(--social-line); border-radius: 12px; background: #fff; color: var(--social-muted); font-size: 13px; font-weight: 600; }
#screen[data-view="progreso"] .progress-metric-tabs button.active { background: var(--social-ink); border-color: var(--social-ink); color: #fff; }
#screen[data-view="progreso"] .progress-metric-summary span { font-size: 13px; color: var(--social-muted); }
#screen[data-view="progreso"] .progress-metric-summary strong { font-size: 28px; font-weight: 650; }
#screen[data-view="progreso"] .progress-metric-summary small { font-size: 12px; color: var(--social-muted); }
#screen[data-view="progreso"] .chart { gap: 8px; }
#screen[data-view="progreso"] .bar { min-width: 0; }
#screen[data-view="progreso"] .bar b { font-size: 12px; font-weight: 600; }
#screen[data-view="progreso"] .bar small { font-size: 12px; color: var(--social-muted); }
#screen[data-view="progreso"] .bar i { background: #C5CDD4; border-radius: 4px 4px 0 0; }
#screen[data-view="progreso"] .bar:last-child i { background: var(--social-ink); }
#screen[data-view="progreso"] .progress-exercise-history details { border-color: var(--social-line); }
#screen[data-view="progreso"] .progress-exercise-history summary { min-height: 52px; padding: 12px 0; }
#screen[data-view="progreso"] .progress-exercise-history summary strong { font-size: 15px; font-weight: 600; }
#screen[data-view="progreso"] .progress-exercise-history summary span { color: var(--social-muted); font-size: 12px; }
#screen[data-view="progreso"] .progress-exercise-history details p { gap: 8px; padding: 12px 0; border-color: var(--social-line); font-size: 14px; }
#screen[data-view="progreso"] .progress-exercise-history details p small { color: var(--social-muted); font-size: 12px; }
#screen[data-view="progreso"] .history-row { padding: 12px 0; border-color: var(--social-line); font-size: 14px; }
#screen[data-view="progreso"] .history-row span { color: var(--social-muted); }
#screen[data-view="calendario"] .card { padding: 16px 8px; }
#screen[data-view="calendario"] .profile-calendar-head { gap: 8px; padding: 0 4px; }
#screen[data-view="calendario"] .profile-calendar-head h2 { font-size: 18px; letter-spacing: -.025em; }
#screen[data-view="calendario"] .profile-calendar-head > div { flex: none; gap: 4px; }
#screen[data-view="calendario"] .profile-calendar-head button { width: 44px; height: 44px; border-color: var(--social-line); border-radius: 12px; color: var(--social-ink); font-size: 25px; }
#screen[data-view="calendario"] .profile-calendar-grid { gap: 4px 0; }
#screen[data-view="calendario"] .profile-calendar-day-label { padding: 8px 0; color: var(--social-muted); font-size: 12px; }
#screen[data-view="calendario"] .profile-calendar-grid button { min-height: 44px; border-radius: 12px; background: #fff; color: var(--social-ink); font-size: 14px; }
#screen[data-view="calendario"] .profile-calendar-grid button.has-activity { background: var(--social-canvas); font-weight: 650; }
#screen[data-view="calendario"] .profile-calendar-grid button.selected { background: var(--social-ink); color: #fff; }
#screen[data-view="calendario"] .profile-calendar-grid button i { background: var(--social-ink); }
#screen[data-view="calendario"] .profile-calendar-grid button.selected i { background: #fff; }
#screen[data-view="calendario"] .profile-calendar-detail { padding: 16px 8px 0; margin-top: 16px; border-color: var(--social-line); font-size: 14px; }
#screen[data-view="calendario"] .profile-calendar-detail > strong { color: var(--social-ink); font-size: 15px; }
#screen[data-view="calendario"] .profile-calendar-detail p { color: var(--social-muted); }

/* Logros y bienestar: el color queda en los iconos correspondientes. */
#screen[data-view="logros"] .wellness-feature { padding: 20px; margin: 20px 0 16px; border: 1px solid var(--social-line); border-radius: 16px; background: #fff; color: var(--social-ink); }
#screen[data-view="logros"] .wellness-feature span { color: var(--social-muted); font-size: 12px; letter-spacing: .04em; }
#screen[data-view="logros"] .wellness-feature strong { font-size: 30px; font-weight: 650; line-height: 1.2; }
#screen[data-view="logros"] .wellness-feature p { color: var(--social-muted); font-size: 15px; margin-top: 8px; }
#screen[data-view="logros"] .wellness-stats { gap: 0; margin: 16px 0; border: 1px solid var(--social-line); border-radius: 16px; background: #fff; overflow: hidden; }
#screen[data-view="logros"] .wellness-stats div { padding: 16px 10px; border-right: 1px solid var(--social-line); border-radius: 0; background: transparent; }
#screen[data-view="logros"] .wellness-stats div:last-child { border-right: 0; }
#screen[data-view="logros"] .wellness-stats strong { font-size: 24px; font-weight: 650; }
#screen[data-view="logros"] .wellness-stats span { font-size: 12px; color: var(--social-muted); }
#screen:is([data-view="logros"], [data-view="clasificacion"]) .wellness-record { gap: 12px; padding: 14px 0; border-color: var(--social-line); }
#screen:is([data-view="logros"], [data-view="clasificacion"]) .wellness-record > div { min-width: 0; }
#screen:is([data-view="logros"], [data-view="clasificacion"]) .wellness-record strong { color: var(--social-ink); font-size: 14px; font-weight: 600; }
#screen:is([data-view="logros"], [data-view="clasificacion"]) .wellness-record small { color: var(--social-muted); font-size: 12px; line-height: 1.4; }
#screen:is([data-view="logros"], [data-view="clasificacion"]) .wellness-record b { font-size: 13px; font-weight: 600; color: var(--social-ink); }
#screen[data-view="logros"] .wellness-record > span:first-child { color: #A17A22; }
#screen[data-view="logros"] .attendance-icon { flex: none; width: 36px; height: 36px; background: var(--social-canvas); color: #A17A22; }
#screen[data-view="logros"] .attendance-copy { min-width: 0; }
#screen[data-view="logros"] .attendance-copy strong { color: var(--social-ink); font-size: 14px; font-weight: 600; }
#screen[data-view="logros"] .attendance-copy small { color: var(--social-muted); font-size: 12px; }
#screen[data-view="logros"] .attendance-preview { min-height: 44px; color: var(--social-ink); font-size: 14px; }
#screen[data-view="logros"] .attendance-celebration { padding: 24px 16px; background: var(--social-canvas); border-color: var(--social-line); border-radius: 16px; }
#screen[data-view="logros"] .attendance-celebration p:not(.eyebrow) { color: var(--social-muted); font-size: 14px; }
#screen[data-view="logros"] .attendance-celebration strong { background: #fff; color: var(--social-ink); font-size: 14px; }
#screen[data-view="logros"] .attendance-prize { background: #fff; border-color: var(--social-line); color: #A17A22; }
#screen[data-view="logros"] .attendance-close { width: 44px; height: 44px; top: 4px; right: 4px; color: var(--social-muted); }
#screen:is([data-view="logros"], [data-view="fotos"]) .wellness-empty { padding: 20px 16px; border-radius: 12px; background: var(--social-canvas); color: var(--social-muted); font-size: 15px; line-height: 1.5; }
#screen[data-view="clasificacion"] .ranking-podium { padding: 16px 8px 0; border: 1px solid var(--social-line); border-radius: 16px; background: #fff; }
#screen[data-view="clasificacion"] .ranking-avatar { background: var(--social-canvas); color: var(--social-ink); font-weight: 600; border-color: #fff; box-shadow: none; }
#screen[data-view="clasificacion"] .podium-person > strong { font-size: 14px; color: var(--social-ink); font-weight: 600; }
#screen[data-view="clasificacion"] .podium-person > small { color: var(--social-muted); font-size: 13px; }
#screen[data-view="clasificacion"] .podium-base { background: #E8ECF0; color: var(--social-ink); border-radius: 8px 8px 0 0; }
#screen[data-view="clasificacion"] .podium-first .podium-base { background: #D9E0E6; color: var(--social-ink); }
#screen[data-view="clasificacion"] .ranking-self { padding-left: 8px; padding-right: 8px; background: var(--social-canvas); border-radius: 12px; }
#screen[data-view="clasificacion"] .ranking-row { gap: 8px; }
#screen[data-view="clasificacion"] .ranking-row .ranking-place { width: 24px; color: var(--social-muted); font-size: 13px; }
#screen[data-view="clasificacion"] .ranking-row .ranking-avatar { width: 36px; height: 36px; font-size: 12px; }
#screen[data-view="fotos"] .wellness-upload { min-height: 48px; padding: 12px 16px; border-radius: 12px; background: var(--social-ink); color: #fff; font-size: 15px; font-weight: 600; line-height: 1.5; }
#screen[data-view="fotos"] .wellness-gallery { gap: 16px 12px; }
#screen[data-view="fotos"] .wellness-gallery > div > button:first-child { border: 2px solid transparent; border-radius: 12px; background: #fff; color: var(--social-ink); }
#screen[data-view="fotos"] .wellness-gallery > div > button.selected { border-color: var(--social-ink); }
#screen[data-view="fotos"] :is(.wellness-gallery img, .wellness-compare img) { height: 180px; object-fit: contain; background: #fff; }
#screen[data-view="fotos"] .wellness-gallery button span { min-height: 44px; display: grid; place-items: center; padding: 8px; font-size: 13px; }
#screen[data-view="fotos"] :is(.wellness-gallery small, .wellness-compare small) { font-size: 12px; color: var(--social-muted); }
#screen[data-view="fotos"] .wellness-remove { min-height: 44px; padding: 8px 0 8px 8px; color: var(--social-muted); font-size: 12px; }
#screen[data-view="fotos"] .wellness-gallery > .wellness-empty { grid-column: 1 / -1; }
#screen[data-view="habitos"] .wellness-counter { gap: 16px; margin: 24px 0; }
#screen[data-view="habitos"] .wellness-counter button { flex: none; width: 48px; height: 48px; border: 1px solid var(--social-line); border-radius: 12px; background: #fff; color: var(--social-ink); }
#screen[data-view="habitos"] .wellness-counter strong { font-size: 30px; font-weight: 650; }
#screen[data-view="habitos"] .wellness-counter small { font-size: 18px; color: var(--social-muted); }

/* Perfil de otro socio: información voluntaria y comparación existentes. */
#screen[data-view="socio"] .community-back { min-height: 44px; margin: 0 0 16px; padding: 8px 0; color: var(--social-ink); font-size: 15px; font-weight: 600; }
#screen[data-view="socio"] .community-member-head { align-items: center; gap: 16px; margin-bottom: 20px; }
#screen[data-view="socio"] .community-member-head > div { min-width: 0; }
#screen[data-view="socio"] .community-member-avatar { width: 56px; height: 56px; background: #fff; color: var(--social-ink); font-size: 18px; font-weight: 600; }
#screen[data-view="socio"] .community-member-head h1 { font-size: 27px; }
#screen[data-view="socio"] .community-member-head p:last-child { font-size: 13px; line-height: 1.5; color: var(--social-muted); }
#screen[data-view="socio"] .community-member-section { margin-top: 24px; padding: 0; border: 0; }
#screen[data-view="socio"] .community-member-section h2 { margin-bottom: 12px; font-size: 21px; }
#screen[data-view="socio"] .community-compare { gap: 0; border: 1px solid var(--social-line); border-radius: 16px; background: #fff; overflow: hidden; }
#screen[data-view="socio"] .community-compare span { border: 0; border-right: 1px solid var(--social-line); border-radius: 0; padding: 16px; font-size: 13px; color: var(--social-muted); }
#screen[data-view="socio"] .community-compare span:last-child { border-right: 0; }
#screen[data-view="socio"] .community-compare strong { color: var(--social-ink); font-size: 26px; font-weight: 650; }
#screen[data-view="socio"] .community-compare-row { gap: 4px; padding: 16px 0; border-color: var(--social-line); font-size: 14px; }
#screen[data-view="socio"] .community-compare-row strong { color: var(--social-ink); font-size: 15px; font-weight: 600; }
#screen[data-view="socio"] :is(.community-compare-row span, .community-common) { color: var(--social-muted); font-size: 14px; }
#screen[data-view="socio"] :is(.community-member-routine, .community-member-post) { padding: 16px; margin-bottom: 12px; border: 1px solid var(--social-line); border-radius: 16px; background: #fff; }
#screen[data-view="socio"] .community-member-routine > strong { font-size: 16px; font-weight: 600; }
#screen[data-view="socio"] :is(.community-member-routine small, .community-member-post > small) { color: var(--social-muted); font-size: 12px; line-height: 1.5; }
#screen[data-view="socio"] .community-member-routine > div { gap: 8px; margin-top: 12px; }
#screen[data-view="socio"] .community-member-routine > div span { font-size: 14px; }
#screen[data-view="socio"] .community-member-routine > div small { display: block; }
#screen[data-view="socio"] .community-member-post h3 { font-size: 18px; margin-top: 8px; font-weight: 600; }
#screen[data-view="socio"] .community-member-post p { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
#screen[data-view="socio"] .community-member-metrics { font-size: 13px; color: var(--social-muted); font-weight: 600; }
#screen[data-view="socio"] .community-member-post img { max-height: 240px; object-fit: contain; border-radius: 12px; background: var(--social-canvas); }

@media (max-width: 380px) {
  #screen[data-view="perfil"] .member-card-head { gap: 12px; }
  #screen[data-view="perfil"] .member-photo { width: 56px; height: 56px; }
  #screen[data-view="perfil"] .member-name h2 { font-size: 21px; }
  #screen[data-view="comunidad"] .community-stats strong { font-size: 15px; }
  #screen[data-view="clasificacion"] .ranking-row .ranking-avatar { width: 30px; height: 30px; }
  #screen[data-view="clasificacion"] .ranking-row { gap: 6px; }
  #screen[data-view="logros"] .wellness-record { flex-wrap: wrap; }
  #screen[data-view="logros"] .wellness-record > b { margin-left: auto; }
}