/* /Components/Shared/ActivityFeed.razor.rz.scp.css */
.sl-feed[b-of5w4gbone] {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    background: var(--sl-surface);
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-r-card);
    box-shadow: var(--sl-e1);
    overflow: hidden;
}

.sl-feed-item[b-of5w4gbone] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--sl-border);
}
.sl-feed-item:last-child[b-of5w4gbone] { border-bottom: none; }

.sl-feed-emoji[b-of5w4gbone] { font-size: 18px; line-height: 1.4; }

.sl-feed-body[b-of5w4gbone] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sl-feed-title[b-of5w4gbone] { font-weight: 600; color: var(--sl-ink); text-decoration: none; }
a.sl-feed-title:hover[b-of5w4gbone] { color: var(--sl-brand); }
.sl-feed-detail[b-of5w4gbone] {
    font-size: var(--sl-fs-small);
    color: var(--sl-ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sl-feed-time[b-of5w4gbone] {
    font-family: var(--sl-font-mono);
    font-size: 11px;
    color: var(--sl-ink-3);
    white-space: nowrap;
}
/* /Components/Shared/CountdownBadge.razor.rz.scp.css */
.sl-countdown[b-l96ia5bh0a] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 10px;
    border-radius: var(--sl-r-pill);
    font-family: var(--sl-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--sl-bg-2);
    color: var(--sl-ink-3);
}

.sl-countdown-dot[b-l96ia5bh0a] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}

.sl-countdown.is-warn[b-l96ia5bh0a] { background: var(--sl-warn-soft); color: var(--sl-warn); }
.sl-countdown.is-critical[b-l96ia5bh0a] { background: var(--sl-error-soft); color: var(--sl-error); }
.sl-countdown.is-critical .sl-countdown-dot[b-l96ia5bh0a] { animation: sl-cd-pulse-b-l96ia5bh0a 1.6s var(--sl-ease) infinite; }
.sl-countdown.is-closed[b-l96ia5bh0a] { background: var(--sl-bg-2); color: var(--sl-ink-3); }

@keyframes sl-cd-pulse-b-l96ia5bh0a {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}
/* /Components/Shared/EmptyState.razor.rz.scp.css */
.sl-empty[b-33zqpludlb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sl-space-8);
    padding: var(--sl-space-40) var(--sl-space-24);
    animation: sl-empty-fade-b-33zqpludlb 0.4s var(--sl-ease);
}

@keyframes sl-empty-fade-b-33zqpludlb {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.sl-empty-icon[b-33zqpludlb] {
    font-size: 48px;
    line-height: 1;
    color: var(--sl-ink-3);
    margin-bottom: var(--sl-space-4);
}

.sl-empty-title[b-33zqpludlb] {
    font-family: var(--sl-font-display);
    font-weight: var(--sl-fw-h4);
    font-size: var(--sl-fs-h3);
    line-height: var(--sl-lh-h3);
    color: var(--sl-ink);
    margin: 0;
}

.sl-empty-text[b-33zqpludlb] {
    font-size: var(--sl-fs-small);
    line-height: var(--sl-lh-small);
    color: var(--sl-ink-3);
    max-width: 42ch;
    margin: 0;
}

.sl-empty-actions[b-33zqpludlb] {
    margin-top: var(--sl-space-8);
    display: flex;
    gap: var(--sl-space-8);
    flex-wrap: wrap;
    justify-content: center;
}
/* /Components/Shared/LoadingState.razor.rz.scp.css */
.sl-sr-only[b-2vvsurnoam] {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Pieza base: shimmer border → bg-2 */
.sl-sk[b-2vvsurnoam] {
    position: relative;
    overflow: hidden;
    background: var(--sl-bg-2);
    border-radius: var(--sl-r-sm);
}
.sl-sk[b-2vvsurnoam]::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sl-surface) 70%, transparent), transparent);
    animation: sl-shimmer-b-2vvsurnoam 1.3s var(--sl-ease) infinite;
}

.sl-sk-line[b-2vvsurnoam] { height: 12px; margin-bottom: var(--sl-space-8); }
.sl-sk-line:last-child[b-2vvsurnoam] { margin-bottom: 0; }
.sl-sk-line.w90[b-2vvsurnoam] { width: 90%; }
.sl-sk-line.w70[b-2vvsurnoam] { width: 70%; }
.sl-sk-line.w50[b-2vvsurnoam] { width: 50%; }

.sl-sk-row[b-2vvsurnoam] {
    height: 52px;
    border-radius: var(--sl-r-sm);
    margin-bottom: var(--sl-space-8);
}
.sl-sk-row:last-child[b-2vvsurnoam] { margin-bottom: 0; }

.sl-sk-grid[b-2vvsurnoam] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--sl-space-16);
}
.sl-sk-card[b-2vvsurnoam] {
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-r-card);
    padding: var(--sl-space-20) var(--sl-space-24);
    background: var(--sl-surface);
    box-shadow: var(--sl-e1);
}

@keyframes sl-shimmer-b-2vvsurnoam {
    100% { transform: translateX(100%); }
}
/* /Components/Shared/MiniBarChart.razor.rz.scp.css */
.sl-chart-empty[b-gpzvosnek5] {
    color: var(--sl-ink-3);
    font-size: var(--sl-fs-small);
    text-align: center;
    padding: var(--sl-space-16);
}

.sl-chart-svg[b-gpzvosnek5] {
    width: 100%;
    height: var(--chart-h, 100px);
    display: block;
}

.sl-chart-xlabels[b-gpzvosnek5] {
    display: grid;
    grid-template-columns: repeat(var(--cols, 1), 1fr);
    gap: 2px;
    color: var(--sl-ink-3);
    font-size: 10px;
    font-family: var(--sl-font-mono);
    text-align: center;
    margin-top: 4px;
}
/* /Components/Shared/MiniLineChart.razor.rz.scp.css */
.sl-chart-empty[b-f98t0hr2e8] {
    color: var(--sl-ink-3);
    font-size: var(--sl-fs-small);
    text-align: center;
    padding: var(--sl-space-16);
}

.sl-chart-svg[b-f98t0hr2e8] {
    width: 100%;
    height: var(--chart-h, 120px);
    display: block;
}

.sl-chart-xlabels-spread[b-f98t0hr2e8] {
    display: flex;
    justify-content: space-between;
    color: var(--sl-ink-3);
    font-size: 10px;
    font-family: var(--sl-font-mono);
    padding: 0 2px;
    margin-top: 4px;
}
/* /Components/Shared/MiniRankingCard.razor.rz.scp.css */
.sl-minirank[b-0upx3xh489] {
    background: var(--sl-surface);
    border: 1px solid var(--sl-border);
    border-top: 3px solid var(--mod, var(--sl-brand));
    border-radius: var(--sl-r-card);
    padding: var(--sl-space-16);
    box-shadow: var(--sl-e1);
}

.sl-mod-football[b-0upx3xh489] { --mod: var(--sl-mod-football); }
.sl-mod-f1[b-0upx3xh489] { --mod: var(--sl-mod-f1); }
.sl-mod-euro[b-0upx3xh489] { --mod: var(--sl-mod-euro); }
.sl-mod-cagada[b-0upx3xh489] { --mod: var(--sl-mod-cagada); }

.sl-minirank-head[b-0upx3xh489] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
}
.sl-minirank-title[b-0upx3xh489] {
    font-family: var(--sl-font-display);
    font-weight: 700;
    font-size: var(--sl-fs-h4);
    color: var(--sl-ink);
}
.sl-minirank-link[b-0upx3xh489] {
    font-family: var(--sl-font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sl-ink-3);
    text-decoration: none;
}
.sl-minirank-link:hover[b-0upx3xh489] { color: var(--sl-brand); }

.sl-minirank-list[b-0upx3xh489] { list-style: none; margin: 0; padding: 0; }
.sl-minirank-row[b-0upx3xh489] {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 6px 6px;
    border-radius: var(--sl-r-sm);
    font-size: var(--sl-fs-small);
}
.sl-minirank-row.is-me[b-0upx3xh489] { background: color-mix(in srgb, var(--sl-brand) 8%, transparent); }
.sl-minirank-merow[b-0upx3xh489] { margin-top: 6px; border-top: 1px dashed var(--sl-border); border-radius: 0 0 var(--sl-r-sm) var(--sl-r-sm); }
.sl-minirank-pos[b-0upx3xh489] { text-align: center; font-variant-numeric: tabular-nums; }
.sl-minirank-name[b-0upx3xh489] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--sl-ink);
    font-weight: 500;
}
.sl-minirank-metag[b-0upx3xh489] {
    font-family: var(--sl-font-mono);
    font-size: 9px;
    font-weight: 800;
    color: var(--sl-brand);
    margin-left: 4px;
}
.sl-minirank-val[b-0upx3xh489] {
    font-family: var(--sl-font-mono);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--sl-ink);
}
.sl-minirank-empty[b-0upx3xh489] {
    font-family: var(--sl-font-mono);
    font-size: 12px;
    color: var(--sl-ink-3);
    padding: 8px 0;
}
/* /Components/Shared/PendingEventsCarril.razor.rz.scp.css */
.sl-pendientes[b-siut3howyk] {
    display: flex;
    gap: var(--sl-space-16);
    overflow-x: auto;
    padding: 4px 2px 12px;
    scroll-snap-type: x mandatory;
    margin-bottom: 28px;
}

.sl-pendiente-card[b-siut3howyk] {
    flex: 0 0 260px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-height: 150px;
    background: var(--sl-surface);
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-r-card);
    padding: var(--sl-space-16);
    box-shadow: var(--sl-e1);
    text-decoration: none;
    color: var(--sl-ink);
    transition: transform var(--sl-dur-std) var(--sl-ease), box-shadow var(--sl-dur-std) var(--sl-ease);
}
.sl-pendiente-card:hover[b-siut3howyk] { transform: translateY(-2px); box-shadow: var(--sl-e2); }
.sl-pendiente-card.is-urgent[b-siut3howyk] { border-color: var(--sl-brand); }

.sl-pendiente-mod[b-siut3howyk] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sl-font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sl-ink-3);
}

.sl-pendiente-name[b-siut3howyk] {
    font-family: var(--sl-font-display);
    font-weight: 700;
    font-size: var(--sl-fs-h4);
    line-height: var(--sl-lh-h4);
    color: var(--sl-ink);
}

.sl-pendiente-cta[b-siut3howyk] {
    font-family: var(--sl-font-body);
    font-weight: 700;
    font-size: 13px;
    color: var(--sl-brand);
    margin-top: auto;
}

.sl-pendientes-empty[b-siut3howyk] {
    font-family: var(--sl-font-mono);
    font-size: 13px;
    color: var(--sl-ink-3);
    padding: 12px 0 28px;
}
/* /Components/Shared/PushPermission.razor.rz.scp.css */
.sl-push-banner[b-7ch5yiqksu] {
    position: fixed;
    bottom: calc(var(--sl-bottom-nav-height, 64px) + 0.75rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1200;
    width: calc(100% - 2rem);
    max-width: 480px;
    animation: sl-push-slide-up-b-7ch5yiqksu 0.3s ease-out;
}

.sl-push-banner-content[b-7ch5yiqksu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--sl-surface-2, #1a1a2e);
    border: 1px solid var(--sl-border, #333);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px);
}

@keyframes sl-push-slide-up-b-7ch5yiqksu {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(1rem);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* En desktop, no hace falta compensar el bottom nav */
@media (min-width: 960px) {
    .sl-push-banner[b-7ch5yiqksu] {
        bottom: 1.5rem;
    }
}
/* /Components/Shared/RankingFilters.razor.rz.scp.css */
.rk-filters[b-qtq2pnojsi] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

/* ── Buscador ── */
.rk-search-wrap[b-qtq2pnojsi] {
    position: relative;
    flex: 1;
    min-width: 160px;
    max-width: 280px;
}

.rk-search-icon[b-qtq2pnojsi] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--sl-ink-3);
    pointer-events: none;
}

.rk-search[b-qtq2pnojsi] {
    width: 100%;
    padding: 7px 32px 7px 34px;
    border: 1px solid var(--sl-border);
    border-radius: 8px;
    background: var(--sl-surface-2);
    color: var(--sl-text-primary);
    font-size: 13px;
    font-family: var(--sl-font-body);
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s;
}

.rk-search:focus[b-qtq2pnojsi] {
    border-color: var(--sl-brand);
}

.rk-search-clear[b-qtq2pnojsi] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--sl-ink-3);
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 4px;
}

.rk-search-clear:hover[b-qtq2pnojsi] {
    color: var(--sl-text-primary);
}

/* ── Chips de ordenación ── */
.rk-sort-chips[b-qtq2pnojsi] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.rk-sort-chip[b-qtq2pnojsi] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 5px 10px;
    border-radius: 20px;
    border: 1px solid var(--sl-border);
    background: var(--sl-surface-2);
    color: var(--sl-text-muted);
    font-size: 11px;
    font-weight: 600;
    font-family: var(--sl-font-mono);
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
    white-space: nowrap;
}

.rk-sort-chip:hover[b-qtq2pnojsi] {
    background: var(--sl-surface-3);
    color: var(--sl-text-primary);
}

.rk-sort-chip.active[b-qtq2pnojsi] {
    background: var(--sl-brand-soft);
    border-color: var(--sl-brand);
    color: var(--sl-brand);
}

.rk-sort-arrow[b-qtq2pnojsi] {
    font-size: 10px;
}

@media (max-width: 480px) {
    .rk-search-wrap[b-qtq2pnojsi] {
        max-width: 100%;
        flex: 1 1 100%;
    }
}
/* /Components/Shared/RecentFormBubbles.razor.rz.scp.css */
.rf-bubbles[b-svsolahywz] {
    display: flex;
    gap: 3px;
    align-items: center;
}

.rf-bubble[b-svsolahywz] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 800;
    font-family: var(--sl-font-mono);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    letter-spacing: 0;
    flex-shrink: 0;
}

.rf-v[b-svsolahywz]     { background: var(--sl-success); }
.rf-e[b-svsolahywz]     { background: var(--sl-warn, #f59e0b); }
.rf-d[b-svsolahywz]     { background: var(--sl-error); }
.rf-empty[b-svsolahywz] { background: var(--sl-surface-3, #e5e7eb); color: var(--sl-ink-3, #9ca3af); font-size: 11px; }
/* /Pages/Admin/AdminNotificaciones.razor.rz.scp.css */
.notif-section-head[b-srvcsg0j2a] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.notif-section-icon[b-srvcsg0j2a] {
    font-size: 20px;
    line-height: 1;
}

.notif-secret-field[b-srvcsg0j2a] {
    position: relative;
}

.notif-stats-grid[b-srvcsg0j2a] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 600px) {
    .notif-stats-grid[b-srvcsg0j2a] {
        grid-template-columns: 1fr 1fr;
    }
}

.notif-stat[b-srvcsg0j2a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px;
    background: var(--sl-surface-3);
    border-radius: var(--sl-r-card);
    text-align: center;
}

.notif-stat-num[b-srvcsg0j2a] {
    font-family: var(--sl-font-mono);
    font-size: 28px;
    font-weight: 700;
    color: var(--sl-brand);
    line-height: 1;
}

.notif-stat-label[b-srvcsg0j2a] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sl-text-muted);
    font-family: var(--sl-font-mono);
}
/* /Pages/Duelo.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Duelo — Head-to-Head comparison page
   ═══════════════════════════════════════════════════════════ */

/* ── Hero VS Section ── */
.duelo-hero[b-u9l4ftzfwp] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 32px 16px;
    margin-bottom: 24px;
    background: var(--sl-surface-2);
    border-radius: var(--sl-radius-lg);
    border: 1px solid var(--sl-border);
    position: relative;
    overflow: hidden;
}

.duelo-hero[b-u9l4ftzfwp]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.06) 0%, transparent 50%, rgba(225, 6, 0, 0.06) 100%);
    pointer-events: none;
}

.duelo-hero-player[b-u9l4ftzfwp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 1;
    min-width: 120px;
}

.duelo-hero-name[b-u9l4ftzfwp] {
    font-family: var(--sl-font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--sl-ink-1);
    text-align: center;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.duelo-hero-vs[b-u9l4ftzfwp] {
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.duelo-hero-vs-text[b-u9l4ftzfwp] {
    font-family: var(--sl-font-heading);
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: var(--sl-ink-3);
    text-shadow: 0 2px 8px rgba(0,0,0,0.12);
    background: linear-gradient(135deg, var(--sl-mod-football), var(--sl-mod-f1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Overall Score Banner ── */
.duelo-score-banner[b-u9l4ftzfwp] {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 2px;
    margin-bottom: 28px;
    border-radius: var(--sl-radius-lg);
    overflow: hidden;
    border: 1px solid var(--sl-border);
}

.duelo-score-side[b-u9l4ftzfwp],
.duelo-score-center[b-u9l4ftzfwp] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    background: var(--sl-surface-2);
    transition: background 0.2s;
}

.duelo-score-center[b-u9l4ftzfwp] {
    max-width: 140px;
    background: var(--sl-surface-3);
}

.duelo-score-winner[b-u9l4ftzfwp] {
    background: color-mix(in srgb, var(--sl-mod-football) 10%, var(--sl-surface-2));
}

.duelo-score-loser[b-u9l4ftzfwp] {
    background: color-mix(in srgb, var(--sl-mod-f1) 6%, var(--sl-surface-2));
}

.duelo-score-num[b-u9l4ftzfwp] {
    font-family: var(--sl-font-mono);
    font-size: 2rem;
    font-weight: 800;
    color: var(--sl-ink-1);
    line-height: 1;
}

.duelo-score-label[b-u9l4ftzfwp] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sl-ink-3);
    margin-top: 4px;
}

/* ── Section ── */
.duelo-section[b-u9l4ftzfwp] {
    margin-bottom: 32px;
    padding: 20px;
    background: var(--sl-surface-2);
    border-radius: var(--sl-radius-lg);
    border: 1px solid var(--sl-border);
}

/* ── Stat Compare ── */
.duelo-stat-compare[b-u9l4ftzfwp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 16px 0 20px;
}

.duelo-stat-item[b-u9l4ftzfwp] {
    padding: 16px;
    background: var(--sl-surface-3);
    border-radius: var(--sl-radius-md);
    border: 1px solid var(--sl-border);
}

.duelo-stat-label[b-u9l4ftzfwp] {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--sl-ink-3);
    margin-bottom: 10px;
}

/* Bar chart */
.duelo-stat-bars[b-u9l4ftzfwp] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.duelo-bar-row[b-u9l4ftzfwp] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.duelo-bar-name[b-u9l4ftzfwp] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sl-ink-2);
    min-width: 70px;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.duelo-bar-track[b-u9l4ftzfwp] {
    flex: 1;
    height: 26px;
    background: var(--sl-surface-1);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.duelo-bar-fill[b-u9l4ftzfwp] {
    height: 100%;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
    min-width: 36px;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.duelo-bar-1[b-u9l4ftzfwp] {
    background: linear-gradient(90deg, var(--sl-mod-football), color-mix(in srgb, var(--sl-mod-football) 70%, white));
}

.duelo-bar-2[b-u9l4ftzfwp] {
    background: linear-gradient(90deg, var(--sl-mod-f1), color-mix(in srgb, var(--sl-mod-f1) 70%, white));
}

.duelo-bar-value[b-u9l4ftzfwp] {
    font-family: var(--sl-font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Stat pair (exact predictions, etc.) */
.duelo-stat-pair[b-u9l4ftzfwp] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.duelo-stat-val[b-u9l4ftzfwp] {
    font-family: var(--sl-font-mono);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--sl-ink-2);
    transition: color 0.2s;
}

.duelo-val-lead[b-u9l4ftzfwp] {
    color: var(--sl-mod-football);
}

.duelo-stat-sep[b-u9l4ftzfwp] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--sl-ink-3);
    text-transform: uppercase;
}

/* ── Table ── */
.duelo-table-wrap[b-u9l4ftzfwp] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 8px;
}

.duelo-table[b-u9l4ftzfwp] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.duelo-table thead[b-u9l4ftzfwp] {
    position: sticky;
    top: 0;
    z-index: 1;
}

.duelo-table th[b-u9l4ftzfwp] {
    padding: 10px 12px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sl-ink-3);
    background: var(--sl-surface-3);
    border-bottom: 2px solid var(--sl-border);
    text-align: left;
}

.duelo-th-right[b-u9l4ftzfwp] { text-align: right; }
.duelo-th-center[b-u9l4ftzfwp] { text-align: center; }

.duelo-table td[b-u9l4ftzfwp] {
    padding: 10px 12px;
    border-bottom: 1px solid var(--sl-border);
    vertical-align: middle;
}

.duelo-table tbody tr:hover[b-u9l4ftzfwp] {
    background: color-mix(in srgb, var(--sl-ink-1) 3%, var(--sl-surface-2));
}

.duelo-td-name[b-u9l4ftzfwp] {
    font-weight: 600;
    color: var(--sl-ink-1);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.duelo-td-pts[b-u9l4ftzfwp] {
    text-align: right;
    font-family: var(--sl-font-mono);
    font-weight: 700;
    white-space: nowrap;
}

.duelo-td-win[b-u9l4ftzfwp] {
    color: var(--sl-mod-football);
    background: color-mix(in srgb, var(--sl-mod-football) 6%, transparent);
}

.duelo-td-loss[b-u9l4ftzfwp] {
    color: var(--sl-ink-3);
}

.duelo-td-draw[b-u9l4ftzfwp] {
    color: var(--sl-ink-2);
}

.duelo-td-result[b-u9l4ftzfwp] {
    text-align: center;
}

.duelo-exact-badge[b-u9l4ftzfwp] {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--sl-mod-football) 15%, transparent);
    color: var(--sl-mod-football);
    margin-left: 4px;
    vertical-align: middle;
}

.duelo-result-badge[b-u9l4ftzfwp] {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.duelo-result-win[b-u9l4ftzfwp] {
    background: color-mix(in srgb, var(--sl-mod-football) 15%, transparent);
    color: var(--sl-mod-football);
}

.duelo-result-draw[b-u9l4ftzfwp] {
    background: var(--sl-surface-3);
    color: var(--sl-ink-3);
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .duelo-hero[b-u9l4ftzfwp] {
        flex-direction: row;
        gap: 12px;
        padding: 20px 12px;
    }

    .duelo-hero-player[b-u9l4ftzfwp] {
        min-width: 80px;
    }

    .duelo-hero-name[b-u9l4ftzfwp] {
        font-size: 0.9rem;
        max-width: 100px;
    }

    .duelo-hero-vs-text[b-u9l4ftzfwp] {
        font-size: 1.4rem;
    }

    .duelo-score-banner[b-u9l4ftzfwp] {
        flex-direction: row;
    }

    .duelo-score-num[b-u9l4ftzfwp] {
        font-size: 1.5rem;
    }

    .duelo-stat-compare[b-u9l4ftzfwp] {
        grid-template-columns: 1fr;
    }

    .duelo-bar-name[b-u9l4ftzfwp] {
        min-width: 50px;
        max-width: 60px;
        font-size: 0.7rem;
    }

    .duelo-stat-val[b-u9l4ftzfwp] {
        font-size: 1.2rem;
    }

    .duelo-table[b-u9l4ftzfwp] {
        font-size: 0.78rem;
    }

    .duelo-table th[b-u9l4ftzfwp],
    .duelo-table td[b-u9l4ftzfwp] {
        padding: 8px 6px;
    }
}
/* /Pages/HallOfFame.razor.rz.scp.css */
/* HallOfFame — scoped styles
   Campeones por temporada + records historicos, usando tokens del design-system. */

/* ── Champions grid ── */
.sl-hof-champions-grid[b-9fl3e4q9td] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--sl-space-20);
    margin-top: var(--sl-space-16);
    margin-bottom: var(--sl-space-32);
    animation: sl-hof-fadeIn-b-9fl3e4q9td var(--sl-dur-page) var(--sl-ease) both;
}

@keyframes sl-hof-fadeIn-b-9fl3e4q9td {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Champion card ── */
.sl-hof-champion-card[b-9fl3e4q9td] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sl-space-12);
    padding: var(--sl-space-32) var(--sl-space-20) var(--sl-space-24);
    background: var(--sl-surface);
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-r-card);
    box-shadow: var(--sl-e1);
    text-align: center;
    transition: box-shadow var(--sl-dur-std) var(--sl-ease),
                transform var(--sl-dur-std) var(--sl-ease);
    overflow: hidden;
}

.sl-hof-champion-card:hover[b-9fl3e4q9td] {
    box-shadow: var(--sl-e2);
    transform: translateY(-2px);
}

.sl-hof-champion-card.gold[b-9fl3e4q9td] {
    border-color: var(--sl-medal-gold);
    box-shadow: var(--sl-e1), 0 0 16px color-mix(in srgb, var(--sl-medal-gold) 20%, transparent);
}

.sl-hof-champion-card.gold:hover[b-9fl3e4q9td] {
    box-shadow: var(--sl-e2), 0 0 24px color-mix(in srgb, var(--sl-medal-gold) 30%, transparent);
}

/* Gold gradient background */
.sl-hof-champion-card.gold[b-9fl3e4q9td]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--sl-medal-gold) 8%, transparent) 0%,
        transparent 50%
    );
    pointer-events: none;
}

/* ── Module tag (top-left corner badge) ── */
.sl-hof-champion-module-tag[b-9fl3e4q9td] {
    position: absolute;
    top: var(--sl-space-8);
    left: var(--sl-space-8);
    width: 28px;
    height: 28px;
    border-radius: var(--sl-r-badge, 6px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 2;
    opacity: 0.85;
}

/* ── Trophy ── */
.sl-hof-champion-trophy[b-9fl3e4q9td] {
    font-size: 44px;
    line-height: 1;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--sl-medal-gold) 50%, transparent));
}

/* ── Winner info ── */
.sl-hof-champion-winner[b-9fl3e4q9td] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sl-space-8);
    position: relative;
    z-index: 1;
}

.sl-hof-champion-name[b-9fl3e4q9td] {
    font-family: var(--sl-font-body);
    font-size: var(--sl-fs-body);
    font-weight: 700;
    color: var(--sl-ink);
}

/* ── Season name ── */
.sl-hof-champion-season[b-9fl3e4q9td] {
    font-size: var(--sl-fs-small);
    color: var(--sl-ink-2);
    position: relative;
    z-index: 1;
    padding-top: var(--sl-space-4);
    border-top: 1px solid color-mix(in srgb, var(--sl-border) 50%, transparent);
    width: 100%;
}

/* ── Points ── */
.sl-hof-champion-points[b-9fl3e4q9td] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    position: relative;
    z-index: 1;
}

.sl-hof-champion-points-value[b-9fl3e4q9td] {
    font-family: var(--sl-font-mono);
    font-size: var(--sl-fs-h2);
    font-weight: var(--sl-fw-h2);
    line-height: 1.1;
    color: var(--sl-medal-gold);
}

.sl-hof-champion-points-label[b-9fl3e4q9td] {
    font-size: var(--sl-fs-kicker);
    font-weight: var(--sl-fw-kicker);
    letter-spacing: var(--sl-tr-kicker);
    text-transform: uppercase;
    color: var(--sl-ink-3);
}

/* ── Records grid ── */
.sl-hof-records-grid[b-9fl3e4q9td] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--sl-space-20);
    margin-top: var(--sl-space-16);
    margin-bottom: var(--sl-space-32);
    animation: sl-hof-fadeIn-b-9fl3e4q9td var(--sl-dur-page) var(--sl-ease) 0.1s both;
}

/* ── Record tile ── */
.sl-hof-record-tile[b-9fl3e4q9td] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sl-space-8);
    padding: var(--sl-space-24) var(--sl-space-16);
    background: var(--sl-surface);
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-r-card);
    box-shadow: var(--sl-e1);
    text-align: center;
    transition: box-shadow var(--sl-dur-std) var(--sl-ease),
                transform var(--sl-dur-std) var(--sl-ease);
}

.sl-hof-record-tile:hover[b-9fl3e4q9td] {
    box-shadow: var(--sl-e2);
    transform: translateY(-2px);
}

.sl-hof-record-tile.gold[b-9fl3e4q9td] {
    border-color: var(--sl-medal-gold);
    box-shadow: var(--sl-e1), 0 0 12px color-mix(in srgb, var(--sl-medal-gold) 15%, transparent);
}

.sl-hof-record-tile.gold[b-9fl3e4q9td]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--sl-medal-gold) 6%, transparent) 0%,
        transparent 50%
    );
    pointer-events: none;
    border-radius: var(--sl-r-card);
}

/* ── Record icon ── */
.sl-hof-record-icon[b-9fl3e4q9td] {
    font-size: 36px;
    line-height: 1;
    position: relative;
    z-index: 1;
}

/* ── Record label ── */
.sl-hof-record-label[b-9fl3e4q9td] {
    font-family: var(--sl-font-display);
    font-size: var(--sl-fs-kicker);
    font-weight: var(--sl-fw-kicker);
    letter-spacing: var(--sl-tr-kicker);
    text-transform: uppercase;
    color: var(--sl-ink-2);
    position: relative;
    z-index: 1;
}

/* ── Record holder (avatar + name) ── */
.sl-hof-record-holder[b-9fl3e4q9td] {
    display: flex;
    align-items: center;
    gap: var(--sl-space-8);
    position: relative;
    z-index: 1;
}

.sl-hof-record-name[b-9fl3e4q9td] {
    font-family: var(--sl-font-body);
    font-size: var(--sl-fs-body);
    font-weight: 600;
    color: var(--sl-ink);
}

/* ── Record value ── */
.sl-hof-record-value[b-9fl3e4q9td] {
    font-family: var(--sl-font-mono);
    font-size: var(--sl-fs-h1);
    font-weight: var(--sl-fw-h1);
    line-height: 1.1;
    color: var(--sl-ink);
    position: relative;
    z-index: 1;
}

.sl-hof-record-tile.gold .sl-hof-record-value[b-9fl3e4q9td] {
    color: var(--sl-medal-gold);
}

/* ── Record context (description below value) ── */
.sl-hof-record-context[b-9fl3e4q9td] {
    font-size: var(--sl-fs-small);
    color: var(--sl-ink-3);
    position: relative;
    z-index: 1;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .sl-hof-champions-grid[b-9fl3e4q9td] {
        grid-template-columns: 1fr;
    }

    .sl-hof-records-grid[b-9fl3e4q9td] {
        grid-template-columns: 1fr 1fr;
    }

    .sl-hof-champion-card[b-9fl3e4q9td] {
        padding: var(--sl-space-24) var(--sl-space-16);
    }

    .sl-hof-champion-trophy[b-9fl3e4q9td] {
        font-size: 36px;
    }

    .sl-hof-champion-points-value[b-9fl3e4q9td] {
        font-size: var(--sl-fs-h3);
    }

    .sl-hof-record-value[b-9fl3e4q9td] {
        font-size: var(--sl-fs-h2);
    }
}

@media (max-width: 400px) {
    .sl-hof-records-grid[b-9fl3e4q9td] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Index.razor.rz.scp.css */
.push-optin-banner[b-oggdzj1wmh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--sl-surface);
    border: 1px solid var(--sl-brand);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.push-optin-text[b-oggdzj1wmh] {
    font-size: 13px;
    color: var(--sl-ink);
    font-weight: 500;
}

.push-optin-actions[b-oggdzj1wmh] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Vitrina de logros (hero) ────────────────────────── */

.sl-home-vitrina[b-oggdzj1wmh] {
    display: inline-flex;
    align-items: center;
    gap: var(--sl-space-4);
    margin-top: var(--sl-space-8);
    text-decoration: none;
}

.sl-home-vitrina-pill[b-oggdzj1wmh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--sl-bg-2);
    border: 1px solid var(--sl-border);
    font-size: 14px;
    transition: transform var(--sl-dur-micro) var(--sl-ease);
}

.sl-home-vitrina:hover .sl-home-vitrina-pill[b-oggdzj1wmh] {
    border-color: var(--sl-brand);
}

.sl-home-vitrina-more[b-oggdzj1wmh] {
    font-family: var(--sl-font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--sl-ink-2);
}

/* Barra de progreso de jornadas dentro del item de la franja de identidad */
.sl-home-identity-prog-item[b-oggdzj1wmh]  .sl-xp-bar {
    width: 100%;
    margin-top: var(--sl-space-4);
}

/* ── Destacados de la semana ─────────────────────────── */

.sl-home-highlights-wrap[b-oggdzj1wmh] {
    margin-bottom: var(--sl-space-24);
}

.sl-home-highlights[b-oggdzj1wmh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--sl-space-12);
}

.sl-home-highlight-card[b-oggdzj1wmh] {
    display: flex;
    flex-direction: column;
    gap: var(--sl-space-8);
    background: var(--sl-surface);
    border: 1px solid var(--sl-border);
    border-left: 3px solid var(--hl-col, var(--sl-brand));
    border-radius: var(--sl-r-card);
    padding: var(--sl-space-12) var(--sl-space-16);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--sl-dur-micro) var(--sl-ease), box-shadow var(--sl-dur-micro) var(--sl-ease);
}

.sl-home-highlight-card:hover[b-oggdzj1wmh] {
    border-color: var(--hl-col, var(--sl-brand));
    box-shadow: var(--sl-e1);
}

.sl-home-highlight-label[b-oggdzj1wmh] {
    font-family: var(--sl-font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hl-col, var(--sl-brand));
}

.sl-home-highlight-user[b-oggdzj1wmh] {
    display: flex;
    align-items: center;
    gap: var(--sl-space-8);
    min-width: 0;
}

.sl-home-highlight-avatar[b-oggdzj1wmh] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.sl-home-highlight-avatar-fb[b-oggdzj1wmh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sl-bg-2);
    color: var(--sl-ink-2);
    font-weight: 700;
    font-size: 13px;
}

.sl-home-highlight-name[b-oggdzj1wmh] {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sl-home-highlight-pts[b-oggdzj1wmh] {
    margin-left: auto;
    font-family: var(--sl-font-mono);
    font-weight: 700;
    font-size: 15px;
    color: var(--sl-ink);
}

.sl-home-highlight-desc[b-oggdzj1wmh] {
    font-size: 12px;
    color: var(--sl-ink-2);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* /Pages/Jornadas.razor.rz.scp.css */
.season-cta-banner[b-9p12ldk0va] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--sl-surface);
    border: 1px solid var(--sl-border);
    border-radius: 12px;
    padding: 12px 16px;
    margin: 8px 0 16px;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    transition: background .15s, border-color .15s;
}

.season-cta-banner:hover[b-9p12ldk0va] {
    background: var(--sl-bg-2);
    border-color: var(--sl-brand);
}

.season-cta-info[b-9p12ldk0va] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.season-cta-label[b-9p12ldk0va] {
    font-weight: 600;
    font-size: 14px;
    color: var(--sl-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.season-cta-sub[b-9p12ldk0va] {
    font-size: 11px;
    color: var(--sl-ink-3);
    font-family: var(--sl-font-mono);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.season-cta-btn[b-9p12ldk0va] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--sl-brand);
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
/* /Pages/Notificaciones.razor.rz.scp.css */
.notif-cfg-grid[b-9j4a9t4emo] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
}

@media (max-width: 600px) {
    .notif-cfg-grid[b-9j4a9t4emo] {
        grid-template-columns: 1fr;
    }
}

.notif-cfg-card[b-9j4a9t4emo] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.notif-cfg-head[b-9j4a9t4emo] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.notif-cfg-icon[b-9j4a9t4emo] {
    font-size: 22px;
    flex-shrink: 0;
}

.notif-cfg-title[b-9j4a9t4emo] {
    font-size: 14px;
    font-weight: 600;
    color: var(--sl-text-primary);
    line-height: 1.2;
}

.notif-cfg-sub[b-9j4a9t4emo] {
    font-size: 11px;
    color: var(--sl-text-muted);
}

.notif-cfg-badge[b-9j4a9t4emo] {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    font-family: var(--sl-font-mono);
    flex-shrink: 0;
}

.notif-cfg-badge.active[b-9j4a9t4emo] {
    background: color-mix(in srgb, var(--sl-success) 15%, transparent);
    color: var(--sl-success);
}

.notif-cfg-badge.inactive[b-9j4a9t4emo] {
    background: var(--sl-surface-3);
    color: var(--sl-text-muted);
}

.notif-cfg-info[b-9j4a9t4emo] {
    font-size: 12px;
    color: var(--sl-text-muted);
    margin: 0;
}

.notif-cfg-toggle-row[b-9j4a9t4emo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.notif-cfg-toggle-label[b-9j4a9t4emo] {
    font-size: 13px;
    color: var(--sl-text-secondary);
}

.notif-cfg-action-btn[b-9j4a9t4emo] {
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--sl-brand);
    background: transparent;
    color: var(--sl-brand);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}

.notif-cfg-action-btn:hover:not(:disabled)[b-9j4a9t4emo] {
    background: color-mix(in srgb, var(--sl-brand) 10%, transparent);
}

.notif-cfg-action-btn:disabled[b-9j4a9t4emo] {
    opacity: .5;
    cursor: default;
}

.notif-cfg-action-btn.danger[b-9j4a9t4emo] {
    border-color: var(--sl-error);
    color: var(--sl-error);
}

.notif-cfg-action-btn.danger:hover:not(:disabled)[b-9j4a9t4emo] {
    background: color-mix(in srgb, var(--sl-error) 10%, transparent);
}

.notif-feed-title[b-9j4a9t4emo] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sl-text-muted);
    font-family: var(--sl-font-mono);
    margin-bottom: 12px;
}
/* /Pages/Reglas.razor.rz.scp.css */
/* ── Reglas page scoped styles ── */

.sl-reglas-section[b-6w2stwtae0] {
    padding: 28px;
}

.sl-reglas-header[b-6w2stwtae0] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.sl-reglas-icon[b-6w2stwtae0] {
    font-size: 2rem;
    line-height: 1;
}

.sl-reglas-title[b-6w2stwtae0] {
    font-family: var(--sl-font-display);
    font-weight: 800;
    font-size: 1.35rem;
    color: var(--sl-ink);
    margin: 0;
    line-height: 1.2;
}

.sl-reglas-subtitle[b-6w2stwtae0] {
    font-family: var(--sl-font-mono);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--sl-muted);
    margin: 2px 0 0;
}

.sl-reglas-desc[b-6w2stwtae0] {
    color: var(--sl-ink-secondary, var(--sl-muted));
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 20px;
}

/* ── Scoring grid ── */
.sl-reglas-scoring-grid[b-6w2stwtae0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.sl-reglas-scoring-item[b-6w2stwtae0] {
    border: 1.5px solid var(--sl-border);
    border-radius: var(--sl-r-badge, 8px);
    padding: 16px;
    text-align: center;
    background: var(--sl-surface-raised, var(--sl-bg));
}

.sl-reglas-scoring-pts[b-6w2stwtae0] {
    display: block;
    font-family: var(--sl-font-mono);
    font-weight: 800;
    font-size: 1.3rem;
    margin-bottom: 6px;
}

.sl-reglas-scoring-label[b-6w2stwtae0] {
    display: block;
    font-size: 0.85rem;
    color: var(--sl-muted);
    line-height: 1.4;
}

.sl-reglas-scoring--exact[b-6w2stwtae0] {
    border-color: var(--sl-brand);
}

.sl-reglas-scoring--exact .sl-reglas-scoring-pts[b-6w2stwtae0] {
    color: var(--sl-brand);
}

.sl-reglas-scoring--partial .sl-reglas-scoring-pts[b-6w2stwtae0] {
    color: var(--sl-warn, #e6a817);
}

.sl-reglas-scoring--wrong .sl-reglas-scoring-pts[b-6w2stwtae0] {
    color: var(--sl-danger, var(--sl-muted));
}

/* ── Example blocks ── */
.sl-reglas-example[b-6w2stwtae0] {
    border: 1.5px dashed var(--sl-border);
    border-radius: var(--sl-r-badge, 8px);
    overflow: hidden;
}

.sl-reglas-example-title[b-6w2stwtae0] {
    font-family: var(--sl-font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sl-brand);
    padding: 10px 16px;
    background: var(--sl-surface-raised, var(--sl-bg));
    border-bottom: 1.5px dashed var(--sl-border);
}

.sl-reglas-example-body[b-6w2stwtae0] {
    padding: 14px 16px;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--sl-ink);
}

.sl-reglas-example-body p[b-6w2stwtae0] {
    margin: 0 0 8px;
}

.sl-reglas-example-body ul[b-6w2stwtae0] {
    margin: 0;
    padding-left: 20px;
    list-style: disc;
}

.sl-reglas-example-body li[b-6w2stwtae0] {
    margin-bottom: 4px;
}

/* ── Inline point badges ── */
.sl-reglas-pts-badge[b-6w2stwtae0] {
    font-family: var(--sl-font-mono);
    font-weight: 700;
    font-size: 0.8rem;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.sl-reglas-pts--exact[b-6w2stwtae0] {
    background: color-mix(in srgb, var(--sl-brand) 15%, transparent);
    color: var(--sl-brand);
}

.sl-reglas-pts--partial[b-6w2stwtae0] {
    background: color-mix(in srgb, var(--sl-warn, #e6a817) 15%, transparent);
    color: var(--sl-warn, #e6a817);
}

.sl-reglas-pts--wrong[b-6w2stwtae0] {
    background: color-mix(in srgb, var(--sl-danger, #c0392b) 15%, transparent);
    color: var(--sl-danger, #c0392b);
}

/* ── Note section ── */
.sl-reglas-note[b-6w2stwtae0] {
    border-left: 4px solid var(--sl-brand);
}
/* /Pages/SeasonPremios.razor.rz.scp.css */
/* SeasonPremios — scoped styles
   Tarjetas de premios end-of-season, usando tokens del design-system. */

/* ── Not finished state ── */
.sl-premios-not-finished[b-ktu8ky9zx3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sl-space-16);
    padding: var(--sl-space-64) var(--sl-space-24);
    text-align: center;
}

.sl-premios-not-finished-icon[b-ktu8ky9zx3] {
    font-size: 64px;
    line-height: 1;
    opacity: 0.7;
}

.sl-premios-not-finished-title[b-ktu8ky9zx3] {
    font-family: var(--sl-font-display);
    font-size: var(--sl-fs-h2);
    font-weight: var(--sl-fw-h2);
    letter-spacing: var(--sl-tr-h2);
    color: var(--sl-ink);
    margin: 0;
}

.sl-premios-not-finished-sub[b-ktu8ky9zx3] {
    font-size: var(--sl-fs-body);
    color: var(--sl-ink-3);
    margin: 0;
    max-width: 400px;
}

/* ── Awards grid ── */
.sl-premios-grid[b-ktu8ky9zx3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--sl-space-20);
    margin-top: var(--sl-space-24);
    animation: sl-premios-fadeIn-b-ktu8ky9zx3 var(--sl-dur-page) var(--sl-ease) both;
}

@keyframes sl-premios-fadeIn-b-ktu8ky9zx3 {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Award card ── */
.sl-premio-card[b-ktu8ky9zx3] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sl-space-12);
    padding: var(--sl-space-32) var(--sl-space-24);
    background: var(--sl-surface);
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-r-card);
    box-shadow: var(--sl-e1);
    text-align: center;
    transition: box-shadow var(--sl-dur-std) var(--sl-ease),
                transform var(--sl-dur-std) var(--sl-ease);
    overflow: hidden;
}

.sl-premio-card:hover[b-ktu8ky9zx3] {
    box-shadow: var(--sl-e2);
    transform: translateY(-2px);
}

/* Tier accent borders & glow */
.sl-premio-card.gold[b-ktu8ky9zx3] {
    border-color: var(--sl-medal-gold);
    box-shadow: var(--sl-e1), 0 0 16px color-mix(in srgb, var(--sl-medal-gold) 20%, transparent);
}

.sl-premio-card.gold:hover[b-ktu8ky9zx3] {
    box-shadow: var(--sl-e2), 0 0 24px color-mix(in srgb, var(--sl-medal-gold) 30%, transparent);
}

.sl-premio-card.silver[b-ktu8ky9zx3] {
    border-color: color-mix(in srgb, var(--sl-medal-silver) 60%, var(--sl-border));
}

.sl-premio-card.bronze[b-ktu8ky9zx3] {
    border-color: color-mix(in srgb, var(--sl-medal-bronze) 50%, var(--sl-border));
}

/* Tier background tints */
.sl-premio-card.gold[b-ktu8ky9zx3]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--sl-medal-gold) 8%, transparent) 0%,
        transparent 50%
    );
    pointer-events: none;
}

.sl-premio-card.silver[b-ktu8ky9zx3]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--sl-medal-silver) 6%, transparent) 0%,
        transparent 50%
    );
    pointer-events: none;
}

.sl-premio-card.bronze[b-ktu8ky9zx3]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--sl-medal-bronze) 6%, transparent) 0%,
        transparent 50%
    );
    pointer-events: none;
}

/* ── Trophy emoji ── */
.sl-premio-trophy[b-ktu8ky9zx3] {
    font-size: 48px;
    line-height: 1;
    position: relative;
    z-index: 1;
}

.sl-premio-card.gold .sl-premio-trophy[b-ktu8ky9zx3] {
    filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--sl-medal-gold) 50%, transparent));
}

/* ── Award name ── */
.sl-premio-name[b-ktu8ky9zx3] {
    font-family: var(--sl-font-display);
    font-size: var(--sl-fs-h3);
    font-weight: var(--sl-fw-h3);
    letter-spacing: var(--sl-tr-h3);
    color: var(--sl-ink);
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

/* ── Winner block ── */
.sl-premio-winner[b-ktu8ky9zx3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sl-space-8);
    position: relative;
    z-index: 1;
}

.sl-premio-winner-name[b-ktu8ky9zx3] {
    font-family: var(--sl-font-body);
    font-size: var(--sl-fs-body);
    font-weight: 600;
    color: var(--sl-ink);
}

/* ── Stat value ── */
.sl-premio-stat[b-ktu8ky9zx3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    position: relative;
    z-index: 1;
}

.sl-premio-stat-value[b-ktu8ky9zx3] {
    font-family: var(--sl-font-mono);
    font-size: var(--sl-fs-h1);
    font-weight: var(--sl-fw-h1);
    line-height: 1.1;
    color: var(--sl-ink);
}

.sl-premio-card.gold .sl-premio-stat-value[b-ktu8ky9zx3] {
    color: var(--sl-medal-gold);
}

.sl-premio-stat-label[b-ktu8ky9zx3] {
    font-size: var(--sl-fs-kicker);
    font-weight: var(--sl-fw-kicker);
    letter-spacing: var(--sl-tr-kicker);
    text-transform: uppercase;
    color: var(--sl-ink-3);
}

/* ── Detail (event name, position context) ── */
.sl-premio-detail[b-ktu8ky9zx3] {
    font-size: var(--sl-fs-small);
    color: var(--sl-ink-2);
    position: relative;
    z-index: 1;
    padding-top: var(--sl-space-4);
    border-top: 1px solid color-mix(in srgb, var(--sl-border) 50%, transparent);
    width: 100%;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .sl-premios-grid[b-ktu8ky9zx3] {
        grid-template-columns: 1fr;
    }

    .sl-premio-card[b-ktu8ky9zx3] {
        padding: var(--sl-space-24) var(--sl-space-16);
    }

    .sl-premio-trophy[b-ktu8ky9zx3] {
        font-size: 40px;
    }

    .sl-premio-stat-value[b-ktu8ky9zx3] {
        font-size: var(--sl-fs-h2);
    }
}