/* Integración local del laboratorio de gamificación. No se carga en producción. */
.gamification-dashboard-card { display:grid; grid-template-columns:auto 1fr auto auto; gap:16px; align-items:center; border-color:rgba(14,183,170,.28); background:linear-gradient(110deg,rgba(14,183,170,.08),rgba(255,255,255,.03)); }
.gamification-dashboard-icon { display:grid; width:46px; height:46px; place-items:center; border-radius:15px; color:var(--color-emt-blue); background:rgba(14,183,170,.13); font-size:20px; }.gamification-dashboard-copy h3 { margin:5px 0 4px; font-size:19px; }.gamification-dashboard-copy h3 strong { color:var(--color-emt-blue); }.gamification-dashboard-copy p { margin:0; color:var(--color-text-secondary); font-size:12px; }.gamification-dashboard-rank { padding:0 18px; border-left:1px solid var(--color-border); text-align:center; }.gamification-dashboard-rank span { display:block; color:var(--color-text-secondary); font-size:10px; text-transform:uppercase; }.gamification-dashboard-rank strong { color:var(--color-amber); font-size:28px; }
.ranking-hero { display:grid; grid-template-columns:1fr 240px; gap:24px; align-items:center; margin-bottom:20px; padding:28px; overflow:hidden; border-color:rgba(14,183,170,.25); background:radial-gradient(circle at 100% 0%,rgba(14,183,170,.18),transparent 38%),var(--color-bg-card); }.ranking-hero h2 { max-width:620px; margin:6px 0 9px; font-size:34px; letter-spacing:-.05em; }.ranking-hero p { margin:0; color:var(--color-text-secondary); font-size:13px; }.ranking-hero-score { display:flex; min-height:145px; align-items:center; justify-content:center; flex-direction:column; border-radius:22px; color:#fff; background:var(--color-bg-sidebar); }.ranking-hero-score span { color:#9ddfd7; font-size:10px; letter-spacing:.12em; text-transform:uppercase; }.ranking-hero-score strong { margin:6px 0 0; color:#fff; font-size:64px; line-height:1; }.ranking-hero-score small { color:#9ddfd7; font-weight:700; }.ranking-page-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(240px,.6fr); gap:20px; }.ranking-board { padding:22px; }.ranking-section-heading { display:flex; align-items:start; justify-content:space-between; gap:10px; }.ranking-section-heading h3 { margin:5px 0 20px; font-size:24px; }.ranking-demo-pill { padding:6px 9px; border-radius:99px; color:var(--color-text-secondary); background:var(--color-bg-tertiary); font-size:10px; }.ranking-demo-pill i { margin-right:4px; color:var(--color-emt-blue); }.ranking-table-head { display:grid; grid-template-columns:48px 1fr 70px; padding:0 10px 10px; color:var(--color-text-secondary); font-size:10px; text-transform:uppercase; }.app-your-ranking,.app-rider-row { display:grid; grid-template-columns:38px 36px 1fr 65px; gap:10px; align-items:center; padding:11px 10px; border-top:1px solid var(--color-border); }.app-rider-row b,.app-your-ranking b { display:block; font-size:13px; }.app-rider-row small,.app-your-ranking small { display:block; color:var(--color-text-secondary); font-size:10px; }.app-rider-row strong,.app-your-ranking strong { justify-self:end; font-size:16px; }.ranking-avatar { display:grid; width:32px; height:32px; place-items:center; border-radius:50%; color:var(--color-text-primary); background:rgba(14,183,170,.16); font-size:10px; font-weight:800; }.ranking-avatar.is-you { color:#fff; background:var(--color-bg-sidebar); }.app-your-ranking { margin-top:5px; border:1px solid rgba(14,183,170,.5); border-radius:11px; background:rgba(14,183,170,.08); }.app-your-ranking>span:first-child { color:var(--color-emt-blue); font-weight:800; }.ranking-side-stack { display:grid; gap:15px; }.ranking-next-card { padding:24px; border-radius:17px; color:#fff; background:var(--color-bg-sidebar); }.ranking-next-card .course-eyebrow { color:#8eb6b0; }.ranking-next-card h3 { margin:8px 0 9px; font-size:23px; line-height:1.08; }.ranking-next-card h3 strong { color:var(--color-amber); }.ranking-next-card p { min-height:38px; margin:0; color:#b6c6c6; font-size:11px; line-height:1.5; }.ranking-progress { height:7px; margin:18px 0; overflow:hidden; border-radius:9px; background:#334950; }.ranking-progress span { display:block; width:55%; height:100%; border-radius:inherit; background:var(--color-emt-blue); }.ranking-next-card>div:last-child { display:flex; justify-content:space-between; color:#93adaa; font-size:10px; }.ranking-next-card>div:last-child b { display:block; margin-top:3px; color:#fff; font-size:13px; }.ranking-privacy-card { display:flex; align-items:center; gap:11px; padding:14px; }.ranking-privacy-card>i { color:var(--color-emt-blue); }.ranking-privacy-card p { flex:1; margin:0; color:var(--color-text-secondary); font-size:10px; line-height:1.45; }.ranking-privacy-card p b { color:var(--color-text-primary); }.ranking-privacy-toggle { border:0; color:var(--color-emt-blue); background:transparent; font-size:11px; font-weight:700; }.ranking-activity-card { display:flex; align-items:center; gap:12px; margin-top:20px; padding:18px 22px; }.ranking-activity-card>div { flex:1; }.ranking-activity-card h3 { margin:4px 0; font-size:17px; }.ranking-activity-card p { margin:0; color:var(--color-text-secondary); font-size:11px; }
@media (max-width:760px) { .gamification-dashboard-card { grid-template-columns:auto 1fr; }.gamification-dashboard-card .btn { grid-column:1/-1; width:100%; }.gamification-dashboard-rank { grid-column:2; grid-row:1; justify-self:end; padding:0; border-left:0; }.gamification-dashboard-copy h3 { font-size:15px; }.ranking-hero { grid-template-columns:1fr; padding:20px; }.ranking-hero h2 { font-size:28px; }.ranking-hero-score { min-height:130px; }.ranking-page-grid { display:flex; flex-direction:column; }.ranking-board { padding:15px; }.ranking-activity-card { align-items:stretch; flex-direction:column; }.ranking-activity-card .btn { width:100%; }.ranking-section-heading h3 { font-size:21px; } }

/* Segunda pasada: más contraste, menos ruido y un módulo más reconocible dentro del dashboard. */
.gamification-dashboard-card { position:relative; overflow:hidden; color:#fff; border:0; background:linear-gradient(110deg,#0f2d52 0%,#163f61 65%,#106f76 100%); box-shadow:0 16px 30px rgba(15,45,82,.18); }
.gamification-dashboard-card:after { position:absolute; right:-28px; bottom:-60px; width:180px; height:180px; border:1px solid rgba(255,255,255,.16); border-radius:50%; content:""; }.gamification-dashboard-icon { color:#0f2d52; background:#f8c34e; }.gamification-dashboard-copy,.gamification-dashboard-rank,.gamification-dashboard-card .btn { position:relative; z-index:1; }.gamification-dashboard-copy .course-eyebrow,.gamification-dashboard-copy p,.gamification-dashboard-rank span { color:#b9d4d7; }.gamification-dashboard-copy h3 { color:#fff; }.gamification-dashboard-copy h3 strong { color:#f8c34e; }.gamification-dashboard-rank { border-color:rgba(255,255,255,.24); }.gamification-dashboard-rank strong { color:#f8c34e; }.gamification-dashboard-card .btn { color:#0f2d52; background:#fff; border:0; }
.ranking-hero { color:#fff; border:0; background:linear-gradient(115deg,#0f2d52 0%,#173e60 58%,#127b7d 100%); box-shadow:0 16px 32px rgba(15,45,82,.18); }.ranking-hero .course-eyebrow { color:#b9d4d7; }.ranking-hero h2 { color:#fff; font-size:38px; }.ranking-hero p { color:#d0e0e0; }.ranking-hero-score { color:#fff; background:rgba(5,24,42,.38); border:1px solid rgba(255,255,255,.16); }.ranking-hero-score strong { color:#f8c34e; }.ranking-hero-score span,.ranking-hero-score small { color:#bde8e2; }
.ranking-board { border:1px solid rgba(15,45,82,.12); box-shadow:0 14px 30px rgba(15,45,82,.08); }.ranking-section-heading h3 { color:var(--color-text-primary); }.ranking-table-head { color:#53657c; font-weight:700; }.app-rider-row,.app-your-ranking { min-height:62px; color:#173451; border-color:rgba(15,45,82,.1); }.app-rider-row small,.app-your-ranking small { color:#53657c; }.app-rider-row strong,.app-your-ranking strong { color:#0f2d52; }.app-your-ranking { color:#0f2d52; background:#e5f7f3; }.ranking-demo-pill { color:#38536b; background:#edf2f4; }.ranking-next-card { box-shadow:0 14px 30px rgba(15,45,82,.15); }.ranking-next-card .course-eyebrow { color:#b9d4d7; }.ranking-next-card p { color:#d1dfdf; }.ranking-next-card>div:last-child { color:#b9d4d7; }.ranking-privacy-card p { color:#53657c; }.ranking-privacy-card p b { color:#173451; }.ranking-privacy-toggle { color:#0f7c77; font-weight:800; }
@media (max-width:760px) { .gamification-dashboard-card { gap:12px; padding:16px; }.gamification-dashboard-copy h3 { font-size:16px; line-height:1.25; }.gamification-dashboard-copy p { font-size:11px; }.gamification-dashboard-rank strong { font-size:25px; }.ranking-hero h2 { font-size:30px; line-height:1.06; }.ranking-hero-score { min-height:126px; }.ranking-table-head,.app-your-ranking,.app-rider-row { grid-template-columns:34px 34px 1fr 55px; padding-right:7px; padding-left:7px; }.ranking-section-heading { align-items:center; }.ranking-demo-pill { font-size:9px; }.ranking-privacy-card { align-items:flex-start; }.ranking-privacy-toggle { margin-left:auto; } }

/* Dirección visual unificada con la app: superficies claras, navy para el foco y amarillo solo para la recompensa. */
#view-dashboard.active { gap:20px; }.stats-grid { gap:14px; }.stat-card { min-height:92px; border:1px solid rgba(15,45,82,.1); border-top:3px solid rgba(17,181,174,.55); box-shadow:0 9px 22px rgba(15,45,82,.06); }.stat-details h3 { color:#40516d; font-weight:700; }.stat-value { color:#0f2d52; }.stat-subtext { color:#66758a; }
#view-dashboard .quick-study-card { margin-bottom:0; border:0; border-radius:18px; color:#fff; background:linear-gradient(110deg,#0f2d52,#183f62); box-shadow:0 14px 28px rgba(15,45,82,.16); }.quick-study-card .course-eyebrow { color:#acd8d4; }.quick-study-card h3 { color:#fff; }.quick-study-card .btn-secondary { color:#0f2d52; background:#fff; border-color:#fff; }.quick-study-card .btn-warning { color:#0f2d52; }
.gamification-dashboard-card { grid-template-columns:52px 1fr auto auto; min-height:116px; padding:20px 22px; border:1px solid rgba(15,45,82,.1); border-left:5px solid #11b5ae; border-radius:18px; color:#0f2d52; background:linear-gradient(120deg,#f7fbfa,#eef7f3); box-shadow:0 11px 24px rgba(15,45,82,.07); }.gamification-dashboard-card:after { display:none; }.gamification-dashboard-icon { width:52px; height:52px; color:#fff; background:#0f2d52; box-shadow:0 7px 14px rgba(15,45,82,.18); }.gamification-dashboard-copy .course-eyebrow,.gamification-dashboard-copy p,.gamification-dashboard-rank span { color:#40516d; }.gamification-dashboard-copy h3 { color:#0f2d52; font-size:20px; }.gamification-dashboard-copy h3 strong { color:#0e8d87; }.gamification-dashboard-rank { border-color:rgba(15,45,82,.13); }.gamification-dashboard-rank strong { color:#d18f00; }.gamification-dashboard-card .btn { color:#fff; background:#0f2d52; }
.ranking-hero { border:1px solid rgba(15,45,82,.1); color:#0f2d52; background:linear-gradient(135deg,#f7fbfa,#eaf5f1); box-shadow:0 12px 25px rgba(15,45,82,.08); }.ranking-hero .course-eyebrow { color:#0e8d87; }.ranking-hero h2 { color:#0f2d52; }.ranking-hero p { color:#40516d; }.ranking-hero-score { color:#fff; background:#0f2d52; box-shadow:0 12px 22px rgba(15,45,82,.18); }.ranking-hero-score strong { color:#f8c34e; }.ranking-hero-score span,.ranking-hero-score small { color:#bde8e2; }.ranking-board { box-shadow:0 10px 22px rgba(15,45,82,.06); }.ranking-next-card { background:#0f2d52; }.ranking-privacy-card { border:1px solid rgba(15,45,82,.1); box-shadow:none; }.ranking-activity-card { border:1px solid rgba(15,45,82,.1); box-shadow:none; }
@media (max-width:760px) { #view-dashboard.active { gap:14px; }.stats-grid { gap:9px; }.stat-card { min-height:82px; }.gamification-dashboard-card { grid-template-columns:46px 1fr; min-height:0; padding:16px; border-left-width:4px; }.gamification-dashboard-icon { width:46px; height:46px; }.gamification-dashboard-copy h3 { font-size:16px; }.gamification-dashboard-rank { grid-column:2; grid-row:1; }.gamification-dashboard-card .btn { grid-column:1/-1; }.ranking-hero h2 { font-size:29px; }.ranking-board { padding:14px; } }

/* Ajustes finales de la demo local a partir de la revisión visual. */
.gamification-remote .stat-icon {
  border:1px solid currentColor;
  box-shadow:0 6px 14px rgba(15,45,82,.08);
  opacity:1;
}

.gamification-remote .local-gamification-profile { margin-top: 18px; border: 1px solid rgba(14,183,170,.22); background: linear-gradient(135deg, rgba(14,183,170,.07), rgba(255,255,255,.9)); }
.gamification-remote .local-gamification-profile .account-section-title { margin-bottom: 12px; }
.gamification-remote .local-gamification-profile h4 { margin: 5px 0; color: var(--color-text-primary); }
.gamification-remote .local-gamification-profile p { color: var(--color-text-secondary); }
.gamification-remote .local-gamification-profile input { border-color: rgba(14,183,170,.35); }
.gamification-remote .local-gamification-feedback { min-height: 16px; margin: 8px 0 0; color: #16877f; font-size: 12px; font-weight: 700; }
.gamification-remote .local-gamification-avatar-note { display: flex; gap: 8px; align-items: center; margin-top: 12px; color: var(--color-text-secondary); font-size: 12px; }
.gamification-remote .local-gamification-avatar-note i { color: var(--color-emt-blue); font-size: 18px; }
.gamification-remote .local-gamification-lab { display: grid; gap: 12px; margin-top: 16px; padding: 16px; border: 1px dashed rgba(14,183,170,.4); border-radius: 14px; background: rgba(14,183,170,.06); }
.gamification-remote .local-gamification-lab strong { display: block; margin-top: 4px; color: var(--color-text-primary); font-size: 14px; }
.gamification-remote .local-gamification-lab-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gamification-remote .local-gamification-lab-actions button { padding: 8px 11px; border: 1px solid rgba(14,183,170,.3); border-radius: 9px; color: var(--color-text-primary); background: #fff; font-size: 11px; font-weight: 700; cursor: pointer; }
.gamification-remote .local-gamification-lab-actions button:hover, .gamification-remote .local-gamification-lab-actions button:focus-visible { border-color: var(--color-emt-blue); color: var(--color-emt-blue); }
.gamification-remote .local-gamification-lab-users { display: flex; align-items: center; gap: 8px; color: var(--color-text-secondary); font-size: 12px; font-weight: 700; }
.gamification-remote .local-gamification-lab-users input { width: 64px; padding: 7px 8px; border: 1px solid rgba(14,183,170,.3); border-radius: 8px; color: var(--color-text-primary); background: #fff; }
.gamification-remote .local-gamification-lab > small { color: var(--color-text-secondary); font-size: 11px; }
.gamification-remote .bg-blue-glow { background-color:#e0efff; }
.gamification-remote .bg-green-glow { background-color:#dff7ef; }
.gamification-remote .bg-amber-glow { background-color:#fff1c7; }
.gamification-remote .bg-red-glow { background-color:#ffe4e3; }
.gamification-remote .gamification-dashboard-card {
  margin-top:0;
  margin-bottom:18px;
  border-color:rgba(14,183,170,.28);
  box-shadow:0 12px 26px rgba(15,45,82,.08);
}
.gamification-remote .gamification-dashboard-icon {
  background-color:#0f2d52;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f8c34e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4h8v4a4 4 0 0 1-8 0V4Z'/%3E%3Cpath d='M8 6H5a3 3 0 0 0 3 4M16 6h3a3 3 0 0 1-3 4M12 12v5M8 20h8M9 17h6'/%3E%3C/svg%3E");
  background-position:center;
  background-repeat:no-repeat;
  background-size:27px 27px;
}
.gamification-remote .gamification-dashboard-icon i { display:none; }
.gamification-remote .app-sidebar .menu-item i {
  color:#0f2d52;
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}
.gamification-remote .app-sidebar .menu-item.active i { color:#fff; }
.gamification-remote .beta-access-card { display:none; }
.gamification-remote .ranking-next-card { color:#fff; background:#0f2d52; }
.gamification-remote .ranking-next-card .course-eyebrow { color:#d8f5ef; }
.gamification-remote .ranking-next-card h3 { color:#fff; }
.gamification-remote .ranking-next-card h3 strong { color:#ffd35c; }
.gamification-remote .ranking-next-card p { color:#eef8f6; }
.gamification-remote .ranking-next-card>div:last-child { color:#cfe8e5; }
.gamification-remote .ranking-next-card>div:last-child b { color:#fff; }
.gamification-remote .ranking-progress { background:#49656c; }
.gamification-remote .ranking-progress span { background:#ffd35c; }
.gamification-remote .ranking-page-grid { align-items:start; }
.gamification-remote .ranking-side-stack { align-self:start; align-content:start; grid-auto-rows:max-content; }
.gamification-remote .ranking-next-card { min-height:238px; }
.gamification-remote .ranking-privacy-card { min-height:82px; }
.gamification-remote .ranking-privacy-status { margin-left:auto; color:#0e8d87; font-size:10px; font-weight:800; white-space:nowrap; }
.gamification-remote .ranking-history-card { padding:16px; border:1px solid rgba(15,45,82,.1); }
.gamification-remote .ranking-history-heading { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:8px; }
.gamification-remote .ranking-history-heading strong { color:#0f2d52; font-size:13px; }
.gamification-remote .ranking-activity-history { display:grid; gap:0; }
.gamification-remote .ranking-history-item { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 0; border-top:1px solid rgba(15,45,82,.08); }
.gamification-remote .ranking-history-item span { min-width:0; }
.gamification-remote .ranking-history-item b,.gamification-remote .ranking-history-item small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gamification-remote .ranking-history-item b { color:#173451; font-size:10px; }
.gamification-remote .ranking-history-item small { margin-top:2px; color:#7a8797; font-size:9px; }
.gamification-remote .ranking-history-item strong { flex:0 0 auto; color:#0e8d87; font-size:12px; }
@media (max-width:992px) {
  .gamification-remote .gamification-dashboard-card { margin-top:14px; }
  .gamification-remote .ranking-page-grid { gap:16px; }
}

.gamification-remote .ranking-podium { position:relative; width:100%; max-width:1150px; margin:0 auto 20px; overflow:hidden; container-type:inline-size; }
.gamification-remote .ranking-podium-image { display:block; width:100%; height:auto; object-fit:contain; }
.gamification-remote .podium-user { position:absolute; top:79.5%; display:flex; width:23%; height:15.8%; box-sizing:border-box; align-items:center; justify-content:space-between; flex-direction:row; gap:clamp(3px,0.55cqw,8px); padding:1% 1.5%; color:#0f2d52; text-align:center; transform:translate(-50%,-50%); animation:podium-user-in .55s ease both; }
.gamification-remote .podium-user--second { left:20%; animation-delay:.08s; }
.gamification-remote .podium-user--first { left:50%; top:72.8%; width:29.7%; height:25.2%; animation-delay:0s; }
.gamification-remote .podium-user--third { left:80.2%; top:81.4%; width:23.4%; height:14%; animation-delay:.16s; }
.gamification-remote .podium-user-identity { display:flex; min-width:0; flex:1 1 auto; box-sizing:border-box; align-items:center; justify-content:flex-start; gap:clamp(3px,0.55cqw,8px); padding:clamp(2px,0.35cqw,5px) clamp(5px,0.7cqw,10px) clamp(2px,0.35cqw,5px) clamp(2px,0.35cqw,5px); border-radius:999px; background:rgba(255,255,255,.82); box-shadow:0 2px 8px rgba(15,45,82,.12); }
.gamification-remote .podium-user-avatar { flex:0 0 auto; width:clamp(18px,3.2cqw,38px); height:clamp(18px,3.2cqw,38px); color:#173451; background:#dff4f0; border:clamp(1px,0.18cqw,2px) solid rgba(17,181,174,.36); font-size:clamp(7px,1.1cqw,13px); }
.gamification-remote .podium-user--first .podium-user-avatar { width:clamp(22px,4cqw,46px); height:clamp(22px,4cqw,46px); }
.gamification-remote .podium-user-name { min-width:0; flex:1 1 auto; overflow:hidden; font-size:clamp(8px,1.6cqw,18px); font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.gamification-remote .podium-user-points { flex:0 0 auto; font-size:clamp(14px,2.35cqw,32px); font-weight:800; line-height:1; text-shadow:0 1px 1px rgba(255,255,255,.7); }
.gamification-remote .podium-user--first .podium-user-points { font-size:clamp(18px,3.1cqw,42px); }
@keyframes podium-user-in { from { opacity:0; transform:translate(-50%,8px) scale(.96); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }
@keyframes podium-user-mobile-in { from { opacity:0; transform:translate(-50%,8px) scale(.96); } to { opacity:1; transform:translate(-50%,0) scale(1); } }
@media (prefers-reduced-motion:reduce) { .gamification-remote .podium-user { animation:none; } }
.gamification-remote .ranking-pagination { display:flex; align-items:center; justify-content:center; gap:12px; min-height:34px; color:#53657c; font-size:11px; }
.gamification-remote .ranking-page-button { padding:6px 10px; border:1px solid rgba(15,45,82,.14); border-radius:8px; color:#0f2d52; background:#fff; font-weight:700; }
.gamification-remote .ranking-page-button:disabled { cursor:not-allowed; opacity:.45; }
.gamification-remote .ranking-info-card { margin-top:24px; padding:0; overflow:hidden; border:0; background:transparent; box-shadow:none; }
.gamification-remote .ranking-tabs { display:flex; gap:4px; padding:8px 12px 0; border-bottom:1px solid rgba(15,45,82,.1); }
.gamification-remote .ranking-tab { padding:11px 14px; border:0; border-bottom:3px solid transparent; color:#53657c; background:transparent; font-weight:800; }
.gamification-remote .ranking-tab.is-active { border-bottom-color:#11b5ae; color:#0f2d52; }
.gamification-remote .ranking-tab-panel { display:flex; align-items:center; gap:12px; margin-top:14px; padding:20px 22px; border:1px solid rgba(15,45,82,.1); border-radius:18px; background:#fff; box-shadow:0 10px 22px rgba(15,45,82,.06); }
.gamification-remote .ranking-tab-panel[hidden] { display:none !important; }
.gamification-remote .ranking-tab-panel>div:first-child { flex:1; }
.gamification-remote .ranking-tab-panel h3 { margin:4px 0; font-size:17px; }
.gamification-remote .ranking-tab-panel p { margin:0; color:#53657c; font-size:11px; }
.gamification-remote .ranking-rules-list { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; flex:1.5; margin:0; padding:0; list-style:none; }
.gamification-remote .ranking-rules-list li { display:flex; align-items:flex-start; gap:7px; padding:9px; border-radius:10px; background:#f4f8f8; }
.gamification-remote .ranking-rules-list i { color:#0e8d87; }
.gamification-remote .ranking-rules-list b,.gamification-remote .ranking-rules-list small { display:block; }
.gamification-remote .ranking-rules-list b { color:#0f2d52; font-size:10px; }
.gamification-remote .ranking-rules-list small { margin-top:3px; color:#53657c; font-size:9px; line-height:1.3; }
@media (max-width:760px) {
  .gamification-remote .header-actions { display:none; }
  .gamification-remote .ranking-next-card { min-height:0; }
  .gamification-remote .ranking-podium { margin-bottom:14px; padding-bottom:clamp(62px,18vw,82px); overflow:visible; }
  .gamification-remote .podium-user,
  .gamification-remote .podium-user--first,
  .gamification-remote .podium-user--third { top:calc(100% - clamp(62px,18vw,82px) + 10px); width:31%; height:auto; min-height:46px; box-sizing:border-box; align-items:stretch; justify-content:center; flex-direction:column; gap:3px; padding:7px 5px; border:1px solid rgba(15,45,82,.1); border-radius:12px; background:#fff; box-shadow:0 8px 16px rgba(15,45,82,.1); transform:translate(-50%,0); animation-name:podium-user-mobile-in; }
  .gamification-remote .podium-user--second { left:17%; }
  .gamification-remote .podium-user--first { left:50%; }
  .gamification-remote .podium-user--third { left:83%; }
  .gamification-remote .podium-user-identity { width:100%; justify-content:center; padding:0; background:transparent; box-shadow:none; }
  .gamification-remote .podium-user-avatar { display:none; }
  .gamification-remote .podium-user-name { max-width:100%; flex:none; text-align:center; font-size:clamp(10px,3.2vw,14px); }
  .gamification-remote .podium-user-points { font-size:clamp(17px,5vw,24px); text-align:center; }
  .gamification-remote .podium-user--first .podium-user-points { font-size:clamp(19px,5.5vw,27px); }
  .gamification-remote .ranking-table-head { grid-template-columns:32px 1fr 52px; }
  .gamification-remote .app-rider-row,
  .gamification-remote .app-your-ranking { grid-template-columns:32px 32px minmax(0,1fr) 52px; gap:7px; }
  .gamification-remote .app-rider-row strong,
  .gamification-remote .app-your-ranking strong { font-size:14px; }
  .gamification-remote .ranking-side-stack { width:100%; }
  .gamification-remote .ranking-privacy-card { min-height:0; }
  .gamification-remote .ranking-tabs { overflow-x:auto; scrollbar-width:none; }
  .gamification-remote .ranking-tabs::-webkit-scrollbar { display:none; }
  .gamification-remote .ranking-tab { flex:0 0 auto; font-size:12px; }
  .gamification-remote .ranking-rules-list { gap:6px; }
  .gamification-remote .ranking-tab-panel { align-items:stretch; flex-direction:column; padding:16px; }
  .gamification-remote .ranking-tab-panel .btn { width:100%; }
  .gamification-remote .ranking-rules-list { grid-template-columns:1fr; }
}

/* El bloque inferior adopta la jerarquia visual de la propuesta original. */
.gamification-remote .ranking-info-card { margin-top:30px; }
.gamification-remote .ranking-tabs { gap:24px; padding:0; border-bottom:1px solid rgba(15,45,82,.14); }
.gamification-remote .ranking-tab { padding:13px 0 12px; font-size:14px; }
.gamification-remote .ranking-tab-panel { min-height:150px; margin-top:16px; padding:24px 26px; border:0; border-radius:20px; color:#fff; background:linear-gradient(115deg,#0f2d52 0%,#173e60 62%,#127b7d 100%); box-shadow:0 14px 28px rgba(15,45,82,.16); }
.gamification-remote .ranking-tab-panel .course-eyebrow { color:#bde8e2; }
.gamification-remote .ranking-tab-panel h3 { color:#fff; font-size:22px; }
.gamification-remote .ranking-tab-panel p { color:#d4e7e5; }
.gamification-remote .ranking-tab-panel .btn-secondary { color:#0f2d52; background:#fff; border-color:#fff; }
.gamification-remote .ranking-tab-panel .btn-green { color:#0f2d52; background:#f8c34e; border-color:#f8c34e; }
.gamification-remote .ranking-rules-list li { background:rgba(255,255,255,.1); }
.gamification-remote .ranking-rules-list i { color:#f8c34e; }
.gamification-remote .ranking-rules-list b { color:#fff; }
.gamification-remote .ranking-rules-list small { color:#d4e7e5; }
.gamification-remote .ranking-rules-list li>strong { flex:0 0 auto; margin-left:auto; color:#f8c34e; font-size:13px; }
@media (max-width:760px) {
  .gamification-remote .ranking-info-card { margin-top:22px; }
  .gamification-remote .ranking-tabs { gap:18px; overflow-x:auto; }
  .gamification-remote .ranking-tab { font-size:12px; }
  .gamification-remote .ranking-tab-panel { min-height:0; padding:18px 16px; }
}

@media (min-width:993px) {
  .gamification-remote .app-sidebar:not(:hover) .account-action-btn {
    position:relative;
    width:56px;
    height:48px;
    margin-inline:auto;
    padding:0;
    border:1px solid rgba(15,45,82,.2);
    border-radius:14px;
    color:#fff;
    background:#0f2d52;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20c.8-3.7 3.1-5.5 7-5.5s6.2 1.8 7 5.5'/%3E%3C/svg%3E");
    background-position:center;
    background-repeat:no-repeat;
    background-size:24px 24px;
    box-shadow:0 8px 18px rgba(15,45,82,.16);
  }
  .gamification-remote .app-sidebar:not(:hover) .account-action-btn i {
    display:none;
  }
  .gamification-remote .app-sidebar:not(:hover) .account-action-btn .profile-glyph {
    position:relative;
    width:24px;
    height:24px;
    display:block !important;
    color:#fff;
    font-family:Arial, sans-serif;
    font-size:17px;
    font-weight:800;
    line-height:24px;
    text-align:center;
  }
  .gamification-remote .app-sidebar:not(:hover) .account-action-btn .profile-glyph::before {
    content:"P";
  }
  .gamification-remote .app-sidebar:not(:hover) .account-action-btn .profile-glyph::after {
    display:none;
  }
  .gamification-remote .app-sidebar:not(:hover) .account-action-btn::after {
    position:absolute;
    left:calc(100% + 10px);
    padding:6px 8px;
    border-radius:7px;
    color:#fff;
    background:#0f2d52;
    content:"Perfil";
    font-size:11px;
    font-weight:700;
    opacity:0;
    pointer-events:none;
    transform:translateX(-4px);
    transition:opacity .16s ease, transform .16s ease;
    white-space:nowrap;
  }
  .gamification-remote .app-sidebar:not(:hover) .account-action-btn:hover::after,
  .gamification-remote .app-sidebar:not(:hover) .account-action-btn:focus-visible::after {
    opacity:1;
    transform:translateX(0);
  }
  .gamification-remote .app-sidebar:not(:hover) .account-action-btn:hover {
    background:#183f61;
    border-color:#11b5ae;
  }
}

/* Approved ranking styles are reused at build time. No local demo activation. */
body:not(.gamification-remote) .gamification-dashboard-card { display:none; }
.gamification-remote [hidden] { display:none !important; }
.gamification-remote .ranking-hero { margin-top:0; }
.gamification-remote .ranking-hero .btn { margin-top:14px; }
.gamification-remote .ranking-next-card { min-height:0; }
.gamification-remote .ranking-next-card p { min-height:0; }
.gamification-remote .remote-own-ranking { display:grid; gap:6px; margin-top:18px; padding:16px; border-radius:12px; background:#e5f7f3; color:#173451; overflow-wrap:anywhere; }
.gamification-remote .remote-rider-row { grid-template-columns:38px minmax(0,1fr) 72px; }
.gamification-remote .remote-rider-row b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gamification-remote .remote-ranking-empty { color:#40516d; font-size:13px; line-height:1.5; }
.gamification-remote .podium-user-identity { background:transparent; box-shadow:none; }
.gamification-remote .ranking-history-item b { font-size:13px; }
.gamification-remote .ranking-history-item small { font-size:11px; color:#53657c; }
.gamification-remote .ranking-rules-list b { font-size:13px; }
.gamification-remote .ranking-rules-list small { font-size:11px; }
.gamification-remote .ranking-page-button { min-height:40px; cursor:pointer; }
.gamification-remote #view-dashboard .gamification-dashboard-card { margin:0 0 20px; }
.gamification-remote .ranking-board,.gamification-remote .ranking-page-grid>* { min-width:0; }
.gamification-remote .app-sidebar:not(:hover) .account-action-btn i.remote-profile-icon { display:inline-block; color:#fff; font-size:20px; }
@media (max-width:760px) {
  .gamification-remote .ranking-page-grid { align-items:stretch; }
  .gamification-remote .remote-rider-row { grid-template-columns:30px minmax(0,1fr) 60px; }
  .gamification-remote .gamification-dashboard-rank { grid-column:2; grid-row:auto; justify-self:start; }
  .gamification-remote .gamification-dashboard-copy { min-width:0; }
  .gamification-remote .ranking-section-heading { flex-wrap:wrap; }
  .gamification-remote .ranking-privacy-card p { font-size:12px; }
}