/* A quiet account shortcut. Full name, points and level remain inside the hub. */
.app-chrome .profile-summary { flex:0 1 auto; width:auto; min-width:0; max-width:240px; min-height:44px; height:44px; padding:5px 8px 5px 5px; gap:8px; border:1px solid #dce8df; border-radius:24px; background:#eff6f0; box-shadow:none; }
.app-chrome .profile-summary:hover { background:#e5f0e8; border-color:#9bbfa8; }
.app-chrome .profile-copy { display:block; min-width:0; max-width:16ch; }
.app-chrome .profile-copy > strong { font-size:14px; font-weight:650; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }
.app-chrome .profile-score,.app-chrome .profile-progress-track { display:none; }
.app-chrome .profile-streak { display:block; flex:none; min-width:0; white-space:nowrap; font-size:13px; font-weight:650; padding:0; border:0; color:#75511e; background:none; }
.app-chrome .profile-chevron { width:12px; height:12px; flex:none; fill:none; stroke:#527260; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.app-chrome .profile-avatar-wrap { width:32px; height:32px; flex:0 0 32px; border:0; border-radius:50%; overflow:visible; background:none; }
.app-chrome .profile-summary img { width:32px; height:32px; border-radius:50%; }
.profile-avatar-initials { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; font-size:13px; font-weight:700; background:#226244; color:#fff; }
.app-chrome .profile-summary[data-sync-state=error] { border-color:#ca8b84; }
.account-status { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; padding-top:12px; border-top:1px solid #dfe8e2; }
#accountHub .account-status .account-sync { margin:0; font-size:12px; line-height:1.5; }
.account-status #refreshButton { display:flex; align-items:center; justify-content:center; flex:none; gap:6px; width:auto; padding:8px 10px; min-height:44px; color:#28704f; font-size:13px; }
.account-status #refreshButton svg { width:18px; height:18px; }
@media(max-width:560px) { .app-chrome .profile-summary { max-width:190px; } .app-chrome .profile-copy { max-width:9ch; } }
@media(max-width:350px) { .app-chrome .profile-summary { gap:6px; padding-right:6px; } .app-chrome .profile-copy { max-width:7ch; } }
/* Perfil is a page (2026-10-08), one page without tabs (2026-10-14): the story, then Para tu coach o nutriólogo, Tu perfil
   público, the next rank, Logros fijados and Metas. One card up to tablets; from 1000px the story left, the rest right. */
#accountHub { max-width:560px; margin:0 auto 24px; padding:16px 0 4px; border:1px solid #dfe8e2; border-radius:22px; background:#fff; color:var(--ink); }
#accountHub :is(h2,h3,input,select,button,summary,a) { scroll-margin:72px 0 96px; }
@media(min-width:1000px) {
  #accountHub { max-width:1040px; display:grid; grid-template-columns:minmax(300px,400px) minmax(0,1fr); align-items:start; padding:18px 4px 8px 0; }
}
/* Tall enough screens keep the story in view while the right column scrolls (just under the sticky section row). */
@media(min-width:1000px) and (min-height:760px) { #accountHub .account-side { position:sticky; top:78px; } }
/* Metas: a section like the others, its heading and the form. */
#accountHub .account-goals { margin:0 16px 14px; padding:14px; border:1px solid #dfe8e2; border-radius:16px; background:#fbfcf8; }
#accountHub .account-goals > h3 { margin:0 0 12px; font-size:15px; color:#1d4532; }
#accountHub .account-goals > h3:focus { outline:none; }
#accountHub .coach-share { margin:0 16px 14px; }
.account-public-preview-more > summary { display:flex; align-items:center; justify-content:space-between; min-height:44px; cursor:pointer; color:#285c41; font-size:14px; font-weight:650; list-style:none; }
.account-public-preview-more > summary::-webkit-details-marker { display:none; }
.account-public-preview-more > summary::after { content:'+'; font-size:18px; }
.account-public-preview-more[open] > summary::after { content:'−'; }
.account-public-preview-more > summary:focus-visible { outline:3px solid #298355; outline-offset:2px; border-radius:4px; }
.account-panel form { margin:0; padding:0; }
.account-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.account-stats > div { padding:12px; border:1px solid #dfebe2; border-radius:12px; background:#f7faf7; }
.account-stats span { display:block; font-size:12px; color:#526c58; }
.account-stats strong { display:block; font-size:23px; color:#205739; margin-top:4px; }
#accountMotivation { margin:12px 0 14px; color:#2f6444; font-size:14px; }
.account-points-detail > summary { min-height:44px; display:flex; align-items:center; cursor:pointer; justify-content:space-between; font-size:14px; font-weight:650; color:#244d35; }
.account-points-detail summary small { font-weight:400; color:#617363; font-size:12px; }
.point-rule { display:grid; grid-template-columns:1fr 34px 62px; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid #e5ede7; }
.point-rule span strong,.point-rule span small { display:block; }
.point-rule strong { font-size:13px; color:#355540; }
.point-rule small { font-size:12px; color:#5b7262; margin-top:3px; }
.point-rule > b { color:#28673e; font-size:16px; }
.point-rule .point-earned { text-align:right; }
.points-window-note { font-size:12px; color:#586e5e; line-height:1.5; margin:12px 0 0; }
.profile-edit-grid { display:grid; grid-template-columns:minmax(0,1fr) 140px; gap:12px; margin-bottom:14px; }
.profile-edit-grid label, #settingsPanel .account-preferences label { font-size:13px; font-weight:400; color:#35573f; }
:is(#accountHub,#settingsPanel) :is(input,select) { font-size:16px; min-height:44px; }
#settingsPanel .account-sync { margin:0; font-size:12px; color:#5c7263; }
@media(max-width:350px) { .profile-edit-grid { grid-template-columns:1fr; } }

/* Goals are scoped to the live panel. */
/* Metas: the calculator is the first, obvious choice; typing them is the alternative. */
.goal-planner-cta { display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:12px; padding:14px; border-radius:16px; color:#fff; text-decoration:none; background:radial-gradient(ellipse at 100% 0,#3a7a57,transparent 70%),#1d5a3d; }
.goal-planner-cta:focus-visible { outline:3px solid #76a344; outline-offset:2px; }
.goal-planner-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:#ffffff1f; font-size:20px; color:#d7ecb4; }
.goal-planner-copy { display:grid; gap:2px; min-width:0; }
.goal-planner-copy strong { font-size:15px; }
.goal-planner-copy small { font-size:12.5px; color:#cfe3d6; }
.goal-planner-go { font-size:20px; color:#d7ecb4; }
.goal-or { margin:14px 0 2px; font-size:13px; line-height:1.4; color:#46624f; }
.goal-macros { margin-top:10px; border-top:1px solid #e6ede8; }
.goal-macros > summary { min-height:44px; display:flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; font-weight:650; color:#52715c; list-style:none; }
.goal-macros > summary::-webkit-details-marker { display:none; }
.goal-macros > summary::after { content:'+'; margin-left:auto; font-size:18px; font-weight:400; }
.goal-macros[open] > summary::after { content:'−'; }
.goal-macros > summary small { font-weight:400; color:#6b7d72; }
#accountPanelGoals .goals-period { margin:8px 0 2px; font-size:13px; font-weight:650; color:#52715c; }
#accountPanelGoals .goals-period:not(:first-child) { margin-top:12px; }
#accountHub #accountPanelGoals .goals-actions { position:static; margin:8px 0 0; padding:12px 0 0; background:none; } /* a section now, not a tab: the buttons close the form */
#accountPanelGoals .goal-input > span { font-size:13px; }
.streak-day small { font-size:12px; }

.reward-preferences { margin:20px 0 0; padding:10px 0 0; border:0; border-top:1px solid #dbe7de; }
.reward-preferences legend { font-size:13px; color:#526d5b; padding:0; }
.reward-preferences label { display:flex; align-items:center; justify-content:space-between; min-height:48px; font-size:14px; }
#accountHub .reward-preferences input { min-height:24px; width:24px; height:24px; accent-color:#267b4e; }
.action-toast { background:linear-gradient(125deg,#163e2d,#245b3d); border:1px solid #96bf8e; max-width:min(470px,calc(100% - 28px)); padding:10px; gap:10px; }
.action-toast > span { font-size:14px; font-weight:600; }
.action-toast > span strong { display:block; font-size:15px; }
.action-toast > span small { display:block; margin-top:5px; font-size:13px; color:#d6eccc; font-weight:500; }
.action-toast button { min-width:44px; min-height:44px; font-size:13px; }
.action-toast .toast-close { width:44px; flex:none; }
.reward-badge { width:38px; height:38px; flex:none; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:21px; background:#d9edbe; color:#26573a; }
.action-toast[data-reward=level], .action-toast[data-reward=streak] { border-color:#ddc88f; }
.reward-enter { animation:reward-enter .28s ease-out; }
.reward-confetti { position:fixed; inset:0; z-index:110; pointer-events:none; overflow:hidden; }
.reward-confetti i { position:absolute; left:var(--x); top:0; width:7px; height:12px; background:#8fbf72; border-radius:2px; opacity:0; animation:reward-fall 1.1s var(--delay) ease-out both; }
.reward-confetti i:nth-child(3n) { background:#e5c470; }
.reward-confetti i:nth-child(3n+1) { background:#55a583; }
@keyframes reward-enter { from { transform:translateY(10px); opacity:0; } to { transform:translateY(0); opacity:1; } }
@keyframes reward-fall { 10% { opacity:.95; } to { transform:translateY(55vh) rotate(var(--turn)); opacity:0; } }
@media(max-width:380px) { .action-toast { gap:7px; padding:8px; } .reward-badge { display:none; } }
@media(prefers-reduced-motion:reduce) { .reward-enter,.points-earned { animation:none!important; } .reward-confetti { display:none; } }

#accountPanelGoals .goal-row { padding:6px 0; }

/* Logros fijados (Social 1B-2): above the tabs on phones, in the left column from 1000px. */
.account-pins { margin:0 16px 14px; padding:14px; border:1px solid #dfe8e2; border-radius:16px; background:#fbfcf8; }
.account-pins-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.account-pins-head h3 { margin:0; font-size:15px; color:#1d4532; }
.account-pins-head h3:focus { outline:none; }
.account-pin-add { min-height:44px; padding:0 14px; border:1px solid #cfe0d2; border-radius:12px; background:#fff; color:#1f5a3c; font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.account-pin-list { list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px; }
.account-pin, .account-pin-option { display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:10px; padding:9px 10px; border:1px solid #e1eadf; border-radius:13px; background:#fff; }
.account-pin-icon { display:grid; place-items:center; width:40px; height:40px; }
.account-pin-icon .rank-badge { --rank-size:40px; }
.account-pin-copy { display:flex; flex-direction:column; gap:2px; min-width:0; }
.account-pin-copy strong { font-size:14px; line-height:1.25; color:#1c4232; overflow-wrap:anywhere; }
.account-pin-copy small { font-size:12px; line-height:1.35; color:#5b6f61; }
.account-pin-actions { display:flex; gap:6px; }
.account-pin-actions button { min-height:44px; min-width:44px; padding:0 10px; border:1px solid #d9e5d5; border-radius:10px; background:#fff; color:#234d35; font:inherit; font-size:12px; font-weight:650; cursor:pointer; }
.account-pin-picker { display:grid; gap:8px; margin-top:12px; }
.account-pin-option { width:100%; min-height:60px; font:inherit; color:inherit; text-align:left; cursor:pointer; }
.account-pin-option:hover { border-color:#9bbfa8; }
.account-pin-option > b { font-size:12px; color:#1f6a43; padding:8px 10px; border-radius:9px; background:#e7f3df; }
.account-pins-empty { margin:10px 0 0; font-size:13px; line-height:1.45; color:#46624f; }
.account-pins-status { margin:8px 0 0; font-size:12px; color:#526750; }
.account-pins-status:empty { display:none; }
:is(.account-pin-add, .account-pin-actions button, .account-pin-option):focus-visible { outline:3px solid #298355; outline-offset:2px; }
@media(max-width:400px) { .account-pin { grid-template-columns:40px minmax(0,1fr); row-gap:6px; } .account-pin-actions { grid-column:2 / -1; } }
/* Share preview: the image is drawn here, on the device; nothing is uploaded. */
.achievement-dialog { padding:20px; }
.achievement-canvas { display:block; width:auto; height:min(46vh, 560px); max-width:100%; aspect-ratio:1080 / 1920; margin:14px auto 12px; border-radius:18px; background:#10251f; box-shadow:0 12px 30px rgba(16,37,31,.22); }
.achievement-visuals { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0 0 10px; }
.achievement-visuals[hidden], .achievement-chip[hidden] { display:none; }
.achievement-chip { min-height:44px; padding:0 14px; border:1px solid #cfdcd2; border-radius:999px; background:#fff; color:#28463a; font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
.achievement-chip[aria-pressed="true"] { border-color:#10251f; background:#10251f; color:#d8f6a8; }
.achievement-chip[aria-pressed="true"]::before { content:"✓ "; }
.achievement-chip:focus-visible { outline:3px solid #7cc35a; outline-offset:2px; }
.achievement-note { margin:0 0 12px; font-size:12px; line-height:1.45; color:#5b6f61; }
.achievement-actions { display:flex; flex-wrap:wrap; gap:8px; }
.achievement-actions > * { flex:1 1 160px; text-decoration:none; }
.achievement-actions > [hidden] { display:none; }
.achievement-status { margin:10px 0 0; min-height:18px; font-size:13px; color:#46624f; }
@media(max-width:560px) { .achievement-dialog { padding:16px; } .achievement-actions > * { flex-basis:100%; } }