/* Objetivos (js/views/goals.js). */

/* Goals: progress that feels like moving forward and celebrations. */
.progress { height: 12px; border-radius: 99px; background: var(--panel-2); overflow: hidden; }
.progress .fill { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #f3c977)); transition: width .6s ease-out; }
.progress.done .fill { background: var(--good); }
.leader { font-weight: 650; }
.celebrate { position: relative; height: 110px; display: grid; place-items: center; }
.celebrate .medal { font-size: 3.4rem; animation: pop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.celebrate .spark { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); opacity: 0; animation: burst .9s ease-out .1s both; }
.celebrate .spark:nth-child(3n) { background: var(--warn); }
.celebrate .spark:nth-child(4n) { background: var(--bad); border-radius: 50%; }
.celebrate-text { text-align: center; font-size: 1.05rem; font-weight: 600; }
@keyframes pop { from { transform: scale(.3); opacity: 0; } }
@keyframes burst { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(0); } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(220deg); } }
.spark.s0 { --x: -90px; --y: -40px; } .spark.s1 { --x: 90px; --y: -38px; } .spark.s2 { --x: -60px; --y: 40px; } .spark.s3 { --x: 64px; --y: 44px; }
.spark.s4 { --x: -110px; --y: 6px; } .spark.s5 { --x: 112px; --y: 2px; } .spark.s6 { --x: -24px; --y: -52px; } .spark.s7 { --x: 30px; --y: -54px; }
.spark.s8 { --x: -34px; --y: 52px; } .spark.s9 { --x: 26px; --y: 54px; } .spark.s10 { --x: -130px; --y: -24px; } .spark.s11 { --x: 132px; --y: 30px; }
@media (prefers-reduced-motion: reduce) {
  .celebrate .medal, .celebrate .spark, .progress .fill { animation: none; transition: none; }
}
@media (max-width: 859px) { .nav a { font-size: .68rem; padding-inline: 0; } .nav a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav a .long { display: none; } }
@media (min-width: 860px) { .nav a .short { display: none; } }

/* UX Objetivos: what is missing first, the pace in plain words, suggested amounts and touch targets of at least 40px. */
.goal-card .card-head h2 { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.goal-card .goal-left { font-size: 1.4rem; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.goal-card .goal-pace { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .9rem; }
.goal-card .goal-pace b { font-variant-numeric: tabular-nums; }
.goal-card .btn.small { min-height: 40px; }
.goal-card .btn.icon-only { min-width: 40px; padding-inline: 8px; }
.goal-actions .btn { flex: 1 1 0; }
.goal-card summary { padding: 9px 0; cursor: pointer; color: var(--accent); font-size: .9rem; font-weight: 600; }
.goal-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.goal-chips .btn.small { min-height: 40px; border-radius: 999px; background: var(--accent-soft); border-color: transparent; color: var(--accent); font-variant-numeric: tabular-nums; }
.goal-chips[hidden] { display: none; }
.goal-rank { display: grid; justify-items: end; gap: 2px; }
.goal-archived > summary { padding-block: 9px; cursor: pointer; font-weight: 650; }
.goal-archived[open] > summary { margin-bottom: 8px; }
.goal-empty .avatar { width: 52px; height: 52px; }
.goal-empty .avatar svg { width: 28px; height: 28px; }
@media (min-width: 560px) { .goal-actions .btn { flex: 0 0 auto; } }

/* UX Objetivos: an empty goal still shows the track of its bar. */
.goal-card .progress { box-shadow: inset 0 0 0 1px var(--line); }
.goal-card .progress.zero { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--muted) 55%, transparent); }

/* UX Objetivos: a goal already reached folds to one tappable line (name, what is
   saved, «Cumplido»); the archived list's summary and its retry are easy to tap. */
.goal-done > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; list-style: none; cursor: pointer; color: var(--text); font-size: 1rem; font-weight: 400; }
.goal-done > summary::-webkit-details-marker { display: none; }
.goal-done > summary > svg { width: 18px; height: 18px; flex: none; color: var(--muted); transition: transform .2s ease; }
.goal-done[open] > summary > svg { transform: rotate(90deg); }
.goal-done[open] > summary { margin-bottom: 12px; }
.goal-done-name { flex: 1; min-width: 0; display: grid; gap: 2px; }
.goal-done-name .title { font-weight: 650; overflow-wrap: anywhere; }
.goal-done-name .small { font-variant-numeric: tabular-nums; }
.goal-done-head { flex-wrap: nowrap; align-items: flex-start; }
.goal-done-head .goal-left { min-width: 0; }
.goal-archived > summary { display: flex; align-items: center; min-height: 44px; padding-block: 0; color: var(--accent); }
.goal-archived .notice .btn.small { min-height: 40px; }
@media (prefers-reduced-motion: reduce) { .goal-done > summary > svg { transition: none; } }

/* UX Objetivos: a goal just reached opens and scrolls into view clear of the phone's bottom bar. */
.goal-done { scroll-margin-block: 12px calc(88px + env(safe-area-inset-bottom)); }

/* UX Objetivos: «Últimos movimientos» opens with a 44px tap, like the other summaries of the card. */
.goal-card .goal-entries > summary { box-sizing: border-box; min-height: 44px; padding-block: 11px; }