/* =====================================================================
   MEDALLAS · Bronce, Plata, Oro y Platino (+ Profesional)
   ===================================================================== */
.mdl { --s: 34px; --m1: #FFE58A; --m2: #F2B400; --m3: #B07A00; --mg: #6B4600; position: relative; display: inline-grid; place-items: center; flex: none; width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden; vertical-align: middle;
  background: radial-gradient(circle at 30% 24%, var(--m1), var(--m2) 56%, var(--m3)); box-shadow: 0 2px 6px rgba(18,21,40,.28), inset 0 0 0 2px rgba(255,255,255,.38), inset 0 -3px 5px rgba(0,0,0,.2); color: var(--mg); transition: transform .3s var(--ease); }
.mdl svg { width: 56%; height: 56%; filter: drop-shadow(0 1px 0 rgba(255,255,255,.45)); }
.mdl::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.7) 50%, transparent 62%); background-size: 260% 100%; background-position: 140% 0; }
.mdl:hover { transform: translateY(-2px) scale(1.12); }
.mdl-sm { --s: 24px; } .mdl-md { --s: 34px; } .mdl-lg { --s: 58px; }
.mdl-bronze { --m1: #F1B07A; --m2: #C0702A; --m3: #7A3E0E; --mg: #4E2606; }
.mdl-silver { --m1: #FFFFFF; --m2: #BAC3D1; --m3: #7B8596; --mg: #424B5C; }
.mdl-gold { --m1: #FFEE9E; --m2: #F5B800; --m3: #A66F00; --mg: #5E3D00; }
.mdl-platinum { --m1: #F4FDFF; --m2: #8ED2F4; --m3: #7C7FF0; --mg: #1F2C86; }
.mdl-pro { --m1: #A9B6FF; --m2: #4F46E5; --m3: #2A2780; --mg: #fff; }
.mdl-gold::after, .mdl-platinum::after, .mdl-pro::after { animation: mdl-shine 5s ease-in-out infinite; } @keyframes mdl-shine { 0%, 58% { background-position: 140% 0; } 100% { background-position: -140% 0; } }
.mdl-platinum { box-shadow: 0 2px 10px rgba(124,127,240,.5), inset 0 0 0 2px rgba(255,255,255,.55), inset 0 -3px 5px rgba(0,0,0,.14); }
.mdl-pro { box-shadow: 0 2px 10px rgba(79,70,229,.5), inset 0 0 0 2px rgba(255,255,255,.4), inset 0 -3px 5px rgba(0,0,0,.25); } .mdl-pro svg { filter: none; }
.mdl-lg svg { width: 52%; height: 52%; }
/* fila compacta */
.mdl-row { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; } .mdl-more { font-size: .72rem; font-weight: 800; color: var(--muted); padding: 0 4px; }
/* etiquetas */
.mdl-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; vertical-align: middle; }
.mdl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 4px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: .78rem; font-weight: 750; color: var(--ink); }
.mdl-chip-gold { border-color: #F5D26B; background: color-mix(in srgb, #F5B800 12%, var(--surface)); } .mdl-chip-platinum { border-color: #9BCBF0; background: color-mix(in srgb, #8ED2F4 16%, var(--surface)); } .mdl-chip-pro { border-color: #A5A9F5; background: color-mix(in srgb, #4F46E5 11%, var(--surface)); } .mdl-chip-silver { border-color: #C9D0DB; } .mdl-chip-bronze { border-color: #E8BB94; background: color-mix(in srgb, #C0702A 9%, var(--surface)); }
/* tarjetas (perfil) */
.mdl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.mdl-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--sh-1); transition: transform .3s var(--ease), box-shadow .3s; } .mdl-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.mdl-card strong { display: block; font-size: 1rem; } .mdl-card small { display: block; color: var(--muted); font-size: .8rem; margin-top: 2px; }
.mdl-tier { display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: var(--surface-2); color: var(--muted); }
.mdl-card-gold .mdl-tier { background: #FFF1B8; color: #7A5200; } .mdl-card-platinum .mdl-tier { background: #DDF2FC; color: #1F2C86; } .mdl-card-silver .mdl-tier { background: #E8ECF2; color: #424B5C; } .mdl-card-bronze .mdl-tier { background: #F9E0CB; color: #6B3508; } .mdl-card-pro .mdl-tier { background: #E4E3FF; color: #312E81; }
/* progreso (Mis medallas) */
.mdl-prog { display: grid; gap: 14px; } .mdl-prow { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--sh-1); } .mdl-prow.off { opacity: .55; }
.mdl-prow .none { width: 58px; height: 58px; border-radius: 50%; border: 2px dashed var(--line); display: grid; place-items: center; color: var(--muted); font-weight: 800; }
.mdl-prow h3 { margin: 0 0 2px; font-size: 1.05rem; } .mdl-prow p { margin: 0; color: var(--muted); font-size: .86rem; }
.mdl-bar { height: 9px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; margin: 8px 0 4px; } .mdl-bar i { display: block; height: 100%; border-radius: 6px; background: var(--brand-grad); }
.mdl-steps { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; } .mdl-steps .mdl { opacity: .3; filter: grayscale(.6); } .mdl-steps .mdl.got { opacity: 1; filter: none; }
@media (prefers-reduced-motion: reduce) { .mdl::after { animation: none !important; } .mdl:hover { transform: none; } }