/* ============================================================
   CineDar — Ranking "Hall de la Fama" · TOP MENSUAL (C14-A)
   Solo lo carga Views/Ranking/Index.cshtml (vía _HomeLayout).
   Reutiliza las variables de paleta de home.css (body.cd-home):
   --cd-bg, --cd-surface, --cd-purple, --cd-blue, --cd-gold, etc.

   Assets PNG reales en /images/ranking/ (nombres engañosos; ver la vista):
   - ranking-hero-bg.png = fondo panorámico del hero (drop-in, opcional).
   - Marco.png           = marco de laureles dorados (enmarca el título).
   - Escudo.png          = emblema del panel "Leyendas CineDar".
   - TOP1/top2/TOP3.png  = medallas oro/plata/bronce del podio.
   - Corona.png          = corona (título honorífico del podio + Soporte VIP).
   - podium/hero/icons/legends.png = 4 insignias decorativas.
   ============================================================ */

.rk-page {
    --rk-gold: var(--cd-gold, #d4a843);
    --rk-gold-hi: var(--cd-gold-hi, #f0c060);
    --rk-silver: #c9d2e0;
    --rk-bronze: #cd7f4b;
    --rk-radius: 16px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.25rem 1rem 3rem;
    color: var(--cd-text, #f5f3ff);
}

.rk-ic { width: 1em; height: 1em; vertical-align: -0.12em; flex: 0 0 auto; }

/* ---------------- (2) HERO ---------------- */
/* Full-bleed: vive FUERA de .rk-page, ocupa todo el ancho (como el hero del Home). Banda baja. */
.rk-hero {
    /* El hero ya no está dentro de .rk-page: re-declara los tokens de marca que usa el título. */
    --rk-gold: var(--cd-gold, #d4a843);
    --rk-gold-hi: var(--cd-gold-hi, #f0c060);
    --rk-silver: #c9d2e0;
    --rk-bronze: #cd7f4b;
    position: relative;
    overflow: hidden;
    border: 0;
    border-bottom: 1px solid rgba(212, 168, 67, .28);
    background:
        radial-gradient(1200px 300px at 50% -40%, rgba(212, 168, 67, .18), transparent 70%),
        radial-gradient(700px 260px at 15% 120%, rgba(139, 92, 246, .22), transparent 70%),
        radial-gradient(700px 260px at 85% 120%, rgba(37, 99, 235, .22), transparent 70%),
        linear-gradient(160deg, #0f0a1e 0%, #0a0716 60%, #06040c 100%);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .40);
}

/* Textura sutil (puntos) por encima del gradiente — sin imágenes externas. */
.rk-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.4px);
    background-size: 22px 22px;
    opacity: .5;
    pointer-events: none;
}

/* Fondo real panorámico: velo oscuro + viñeta central para legibilidad del título. */
.rk-hero--img {
    border-color: rgba(212, 168, 67, .38);
    background:
        linear-gradient(180deg, rgba(6, 4, 12, .55) 0%, rgba(6, 4, 12, .62) 55%, rgba(6, 4, 12, .82) 100%),
        radial-gradient(115% 130% at 50% 40%, rgba(6, 4, 12, .80) 0%, rgba(6, 4, 12, .42) 55%, rgba(6, 4, 12, .10) 100%),
        url("/images/ranking/ranking-hero-bg.png") center/cover no-repeat,
        #06040c;
}
.rk-hero--img::before { opacity: .18; }

.rk-hero-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(.5rem, 1.6vw, 1rem) 1rem clamp(.6rem, 1.6vw, 1rem);
    text-align: center;
}

/* Marco de laureles (PNG) enmarcando el bloque de título. El texto vive en el centro
   transparente del marco; los laureles curvan a izq/der y el divisor-estrella queda abajo. */
/* El marco de laureles (Marco.png, 1448x1086) es el FONDO del crest, con la misma
   relación de aspecto para que 'contain' lo llene y los laureles queden en los bordes;
   el título vive en el centro transparente del marco. */
.rk-hero-crest {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1rem;
    width: min(600px, 90%);
    aspect-ratio: 1448 / 620;   /* banda BAJA: recorta el vacío superior/inferior del marco */
    background: url("/images/ranking/Marco.png") center / 100% auto no-repeat;
    filter: drop-shadow(0 4px 16px rgba(212, 168, 67, .28));
}
.rk-hero-crest > * { position: relative; z-index: 1; }

/* Solo para lectores de pantalla (mantiene la jerarquía de encabezados sin ruido visual). */
.rk-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Ligeramente por encima del centro geométrico para que 'HISTÓRICO' quede sobre el
   divisor-estrella inferior del marco. */
.rk-hero-titles { display: flex; flex-direction: column; align-items: center; gap: .1rem; transform: translateY(-2%); }

.rk-hero-star {
    color: var(--rk-gold-hi);
    line-height: 1;
    margin-bottom: -.1rem;
    filter: drop-shadow(0 0 10px rgba(240, 192, 96, .7));
}
.rk-hero-star svg { width: 20px; height: 20px; display: block; }

.rk-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    font-size: .72rem;
    letter-spacing: .5em;
    color: var(--rk-gold-hi);
    font-weight: 700;
}
.rk-hero-kicker::before,
.rk-hero-kicker::after {
    content: "";
    width: clamp(20px, 5vw, 40px);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rk-gold));
}
.rk-hero-kicker::after { margin-left: -.5em; background: linear-gradient(90deg, var(--rk-gold), transparent); }

.rk-hero-title {
    margin: 0;
    font-family: Georgia, "Palatino Linotype", "Times New Roman", serif;
    font-size: clamp(1.4rem, 4.6vw, 2.3rem);
    font-weight: 800;
    letter-spacing: .05em;
    line-height: 1.02;
    white-space: nowrap;
    background: linear-gradient(180deg, #fff6df 0%, var(--rk-gold-hi) 45%, var(--rk-gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 2px 24px rgba(212, 168, 67, .35);
}

/* Una sola línea en escritorio (envuelve solo si no cabe, p.ej. móvil). */
.rk-hero-sub { margin: .2rem 0 0; color: #cdc7e0; font-size: clamp(.82rem, 2.2vw, .96rem); line-height: 1.45; max-width: min(760px, 96%); }

.rk-hero-month {
    margin: .1rem 0 .05rem;
    display: inline-block;
    padding: .25rem .85rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
    background: linear-gradient(90deg, rgba(139, 92, 246, .35), rgba(37, 99, 235, .35));
    border: 1px solid var(--cd-line, rgba(139, 92, 246, .28));
}

/* ---------------- (3) TABS ---------------- */
.rk-tabs {
    display: flex;
    gap: .5rem;
    margin: 1.4rem 0 1.1rem;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .25rem;
}

.rk-tab {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
    flex: 0 0 auto;
    font: inherit;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--cd-muted, #9d97b5);
    background: var(--cd-surface, #0d0a17);
    border: 1px solid var(--cd-line, rgba(139, 92, 246, .28));
    border-radius: 999px;
    padding: .7rem 1.25rem;
    cursor: pointer;
    text-decoration: none; /* C14-F: mensual/total son <a> (enlaces reales); sin subrayado */
    transition: color .15s, border-color .15s, background .15s;
}

.rk-tab:not(.is-active):hover { color: var(--cd-text, #f5f3ff); border-color: rgba(139, 92, 246, .5); }

.rk-tab.is-active {
    color: #fff;
    background: linear-gradient(135deg, #2563eb 0%, #6d47d9 55%, #8b5cf6 100%);
    border-color: rgba(139, 92, 246, .85);
    box-shadow: 0 10px 26px rgba(76, 71, 201, .45), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.rk-tab.is-active .rk-ic { color: #fff; }

.rk-tab-locked { cursor: not-allowed; opacity: .72; }
.rk-tab-locked:disabled { pointer-events: none; }

.rk-soon {
    font-size: .62rem;
    letter-spacing: .04em;
    font-weight: 800;
    padding: .12rem .5rem;
    border-radius: 999px;
    color: var(--rk-gold-hi);
    background: rgba(212, 168, 67, .14);
    border: 1px solid rgba(212, 168, 67, .4);
}

/* ---------------- LAYOUT (main + side) ---------------- */
.rk-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1.25rem;
    align-items: start;
}

/* C14-F: estado de carga sutil mientras el JS reemplaza podio+tabla+aside al cambiar de periodo. */
.rk-layout.rk-loading { opacity: .55; pointer-events: none; transition: opacity .15s ease; }

.rk-main { min-width: 0; }

/* ---------------- (4) PODIO ---------------- */
.rk-podium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: nowrap;
    margin: 2.75rem 0 1.5rem;
}

.rk-pcard {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    max-width: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.9rem 1rem 1.3rem;
    border-radius: var(--rk-radius);
    background: linear-gradient(180deg, var(--cd-surface-2, #120e20), var(--cd-surface, #0d0a17));
    border: 1px solid var(--cd-line, rgba(139, 92, 246, .28));
    box-shadow: 0 14px 34px rgba(0, 0, 0, .4);
}

/* Orden visual en escritorio: 2º izquierda, 1º centro (más alto), 3º derecha. */
.rk-podium .rk-p1 { order: 2; }
.rk-podium .rk-p2 { order: 1; }
.rk-podium .rk-p3 { order: 3; }

/* Acotado a .rk-podium para no filtrarse a otros usos de rk-p1/2/3. */
.rk-podium .rk-p1 {
    transform: translateY(-18px);
    padding-top: 3.4rem;
    border-color: rgba(212, 168, 67, .6);
    background:
        radial-gradient(120px 80px at 50% 0%, rgba(212, 168, 67, .22), transparent 70%),
        linear-gradient(180deg, #17122a, var(--cd-surface, #0d0a17));
    box-shadow: 0 20px 48px rgba(212, 168, 67, .22), 0 14px 34px rgba(0, 0, 0, .45);
}
.rk-podium .rk-p2 { border-color: rgba(201, 210, 224, .4); }
.rk-podium .rk-p3 { border-color: rgba(205, 127, 75, .45); }

/* ---------------- BORDE CON LÍNEA ANIMADA (podio + panel lateral) ----------------
   Un ::before pinta un disco cónico girando; un ::after opaco inset revela SOLO el aro
   (SIN mask-composite a propósito: colgaba el rasterizado). @property anima el ángulo;
   sin soporte queda un contorno estático. prefers-reduced-motion → sin movimiento. */
@property --rk-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes rk-rotate { to { --rk-angle: 360deg; } }

.rk-pcard, .rk-card {
    position: relative;
    isolation: isolate;
    --rk-line-dim: rgba(139, 92, 246, .22);
    --rk-line-hot: rgba(167, 139, 250, .95);
    --rk-line-w: 1.4px;
    --rk-line-dur: 6s;
    --rk-fill: linear-gradient(180deg, var(--cd-surface-2, #120e20), var(--cd-surface, #0d0a17));
}
.rk-pcard::before, .rk-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: conic-gradient(from var(--rk-angle, 0deg),
        var(--rk-line-dim) 0deg,
        var(--rk-line-dim) 130deg,
        var(--rk-line-hot) 200deg,
        #ffffff 232deg,
        var(--rk-line-hot) 264deg,
        var(--rk-line-dim) 320deg,
        var(--rk-line-dim) 360deg);
    pointer-events: none;
    z-index: 0;
    animation: rk-rotate var(--rk-line-dur) linear infinite;
}
.rk-pcard::after, .rk-card::after {
    content: "";
    position: absolute;
    inset: var(--rk-line-w);
    border-radius: inherit;
    background: var(--rk-fill);
    pointer-events: none;
    z-index: 1;
}
.rk-pcard > *, .rk-card > * { position: relative; z-index: 2; }

/* Acento por posición del podio: #1 dorado (más grueso/brillante), #2 plata, #3 bronce. */
.rk-podium .rk-p1 { --rk-line-dim: rgba(212, 168, 67, .36); --rk-line-hot: #ffe9a8; --rk-line-w: 2px;   --rk-line-dur: 4.5s;
    --rk-fill: radial-gradient(120px 80px at 50% 0%, rgba(212, 168, 67, .22), transparent 70%), linear-gradient(180deg, #17122a, var(--cd-surface, #0d0a17)); }
.rk-podium .rk-p2 { --rk-line-dim: rgba(201, 210, 224, .30); --rk-line-hot: #ffffff; --rk-line-w: 1.6px; --rk-line-dur: 5.5s; }
.rk-podium .rk-p3 { --rk-line-dim: rgba(205, 127, 75, .32); --rk-line-hot: #f3b88a; --rk-line-w: 1.6px; --rk-line-dur: 6.5s; }
.rk-podium .rk-p1::before { filter: drop-shadow(0 0 6px rgba(240, 200, 120, .5)); }

@media (prefers-reduced-motion: reduce) {
    .rk-pcard::before, .rk-card::before { animation: none; }
}

/* Medalla PNG (oro/plata/bronce) elevada sobre la tarjeta. */
.rk-medal-img {
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    width: 58px;
    height: auto;
    z-index: 3;
    pointer-events: none;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5));
}
.rk-podium .rk-p1 .rk-medal-img {
    width: 74px;
    top: -46px;
    filter: drop-shadow(0 8px 18px rgba(212, 168, 67, .5));
}

/* ---------------- Avatar (iniciales o foto opt-in) ---------------- */
.rk-avatar {
    position: relative;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 1.7rem;
    color: #fff;
    letter-spacing: .02em;
    border: 2px solid rgba(255, 255, 255, .16);
    box-shadow: inset 0 2px 8px rgba(255, 255, 255, .18), 0 6px 16px rgba(0, 0, 0, .35);
    user-select: none;
    overflow: hidden;
}
.rk-podium .rk-p1 .rk-avatar { width: 92px; height: 92px; font-size: 2rem; border-color: rgba(212, 168, 67, .7); }
.rk-avatar-sm { width: 38px; height: 38px; font-size: .9rem; border-width: 1px; box-shadow: none; }

/* Foto real (solo opt-in): cubre el círculo; onerror la elimina y quedan las iniciales debajo. */
.rk-avatar-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    z-index: 1;
}

/* Aro metálico alrededor del avatar del podio (oro/plata/bronce; #1 con brillo). */
.rk-avatar-ring { display: grid; place-items: center; border-radius: 50%; padding: 3px; }
.rk-podium .rk-p1 .rk-avatar-ring {
    padding: 4px;
    background: conic-gradient(from 210deg, #d4a843, #ffe9a8, #f0c060, #d4a843, #ffe9a8);
    box-shadow: 0 0 20px rgba(212, 168, 67, .5);
}
.rk-podium .rk-p2 .rk-avatar-ring { background: linear-gradient(180deg, #f2f6ff, #c9d2e0); }
.rk-podium .rk-p3 .rk-avatar-ring { background: linear-gradient(180deg, #f0b184, #cd7f4b); }

.rk-avatar.c0 { background: linear-gradient(135deg, #6d5efc, #8b5cf6); }
.rk-avatar.c1 { background: linear-gradient(135deg, #2563eb, #22d3ee); }
.rk-avatar.c2 { background: linear-gradient(135deg, #d4a843, #f0c060); color: #241802; }
.rk-avatar.c3 { background: linear-gradient(135deg, #16a34a, #22c55e); }
.rk-avatar.c4 { background: linear-gradient(135deg, #db2777, #f472b6); }
.rk-avatar.c5 { background: linear-gradient(135deg, #ea580c, #fb923c); color: #241002; }
.rk-avatar.c6 { background: linear-gradient(135deg, #0891b2, #38bdf8); }
.rk-avatar.c7 { background: linear-gradient(135deg, #7c3aed, #c084fc); }

.rk-pname {
    margin: .8rem 0 .1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    max-width: 100%;
    font-family: Georgia, "Palatino Linotype", "Times New Roman", serif;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .01em;
}
.rk-name-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Check "verificado" (CHECK.png) junto a cada nombre. */
.rk-check { width: 17px; height: 17px; flex: 0 0 auto; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.rk-check-sm { width: 13px; height: 13px; flex: 0 0 auto; vertical-align: -1px; margin-left: .25rem; }
/* C16 — corazón de donador junto al nombre (convive con el check y el tier). Pequeño y elegante. */
.rk-heart { width: 15px; height: 15px; flex: 0 0 auto; margin-left: .3rem; fill: #f43f5e; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.rk-heart-sm { width: 12px; height: 12px; vertical-align: -1px; margin-left: .2rem; }
.rk-ptitle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    font-size: .72rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--rk-gold-hi);
    font-weight: 700;
}
.rk-crown { width: 15px; height: auto; flex: 0 0 auto; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .45)); }
.rk-podium .rk-p2 .rk-ptitle { color: var(--rk-silver); }
.rk-podium .rk-p3 .rk-ptitle { color: #e6a377; }

.rk-pamount-box {
    width: 100%;
    margin: .85rem 0 .55rem;
    padding: .55rem .5rem .5rem;
    border-radius: 12px;
    text-align: center;
    background: rgba(0, 0, 0, .26);
    border: 1px solid rgba(255, 255, 255, .07);
}
.rk-podium .rk-p1 .rk-pamount-box {
    background: rgba(212, 168, 67, .10);
    border-color: rgba(212, 168, 67, .34);
}
.rk-pamount-label {
    display: block;
    font-size: .6rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cd-muted, #9d97b5);
    margin-bottom: .15rem;
}
.rk-pamount {
    font-size: 1.35rem;
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
}
.rk-podium .rk-p1 .rk-pamount { font-size: 1.62rem; color: var(--rk-gold-hi); text-shadow: 0 0 18px rgba(212, 168, 67, .35); }

.rk-pmeta {
    display: flex;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    font-size: .74rem;
    color: var(--cd-muted, #9d97b5);
}
.rk-pmeta-cell {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .08rem;
    padding: .38rem .3rem;
    border-radius: 9px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .05);
}
.rk-pmeta-cell strong {
    font-size: .9rem;
    font-weight: 800;
    color: var(--cd-text, #f5f3ff);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rk-pmeta-cell em {
    font-style: normal;
    font-size: .62rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--cd-muted, #9d97b5);
}

/* ---------------- (5) TABLA ---------------- */
.rk-table-wrap {
    border-radius: var(--rk-radius);
    border: 1px solid var(--cd-line, rgba(139, 92, 246, .28));
    background: var(--cd-surface, #0d0a17);
    overflow: hidden;
}
.rk-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.rk-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px;
}
.rk-table thead th {
    text-align: left;
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cd-muted, #9d97b5);
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--cd-line, rgba(139, 92, 246, .28));
    background: rgba(255, 255, 255, .02);
    white-space: nowrap;
}
.rk-table tbody td {
    padding: .8rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    font-size: .9rem;
    vertical-align: middle;
}
.rk-table tbody tr:last-child td { border-bottom: none; }
.rk-table tbody tr:hover { background: rgba(139, 92, 246, .07); }

.rk-col-amount, .rk-col-buys { text-align: right; white-space: nowrap; }
.rk-col-since { white-space: nowrap; color: var(--cd-muted, #9d97b5); }
.rk-amount { font-weight: 800; color: #5c9dff; }
/* C20 — el carrito de la columna "Compras" es SOLO de móvil: allí la fila es compacta y se pierde
   la cabecera de la tabla, así que el icono es lo que da sentido al número. Aquí la columna ya se
   titula "Compras" y el icono sobraría. */
.rk-buys-ic { display: none; }

.rk-pos-badge {
    display: inline-grid;
    place-items: center;
    width: 30px;
    min-width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    font-weight: 800;
    font-size: .82rem;
    color: var(--cd-text, #f5f3ff);
    background: rgba(139, 92, 246, .16);
    border: 1px solid var(--cd-line, rgba(139, 92, 246, .28));
}

.rk-user { display: inline-flex; align-items: center; gap: .6rem; min-width: 0; }
.rk-user-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rk-user-name {
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    max-width: 240px;
    white-space: nowrap;
}
/* Subtítulo de tier bajo el nombre en la tabla (color por tier, inline en la vista). */
.rk-user-tier { font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: var(--rk-gold-hi); }

.rk-more-wrap { display: flex; justify-content: center; padding: 1rem; }
.rk-more {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 800;
    font-size: .82rem;
    letter-spacing: .04em;
    color: var(--cd-text, #f5f3ff);
    background: linear-gradient(90deg, rgba(139, 92, 246, .22), rgba(37, 99, 235, .22));
    border: 1px solid var(--cd-line, rgba(139, 92, 246, .28));
    border-radius: 11px;
    padding: .7rem 1.4rem;
    cursor: pointer;
    transition: border-color .15s, transform .1s;
}
.rk-more:hover { border-color: var(--cd-purple, #8b5cf6); color: #fff; }
.rk-more:active { transform: translateY(1px); }
.rk-more[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* ---------------- (6) PANEL LATERAL ---------------- */
.rk-side { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: 1rem; }

.rk-card {
    border-radius: var(--rk-radius);
    border: 1px solid var(--cd-line, rgba(139, 92, 246, .28));
    background: linear-gradient(180deg, var(--cd-surface-2, #120e20), var(--cd-surface, #0d0a17));
    padding: 1.15rem 1.15rem 1.3rem;
}
.rk-card-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .9rem;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
}
.rk-card-title .rk-ic { color: var(--rk-gold); }

/* (a) Leyendas CineDar */
.rk-legends { text-align: center; }
.rk-legends-crest {
    width: min(220px, 78%);
    height: auto;
    margin: .1rem auto .7rem;
    filter: drop-shadow(0 10px 26px rgba(139, 92, 246, .5));
}
.rk-legends-title {
    margin: 0 0 .4rem;
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
}
.rk-legends-text { margin: 0 auto .9rem; max-width: 32ch; font-size: .82rem; color: var(--cd-muted, #9d97b5); line-height: 1.5; }
.rk-legends-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .5rem .95rem;
    border-radius: 999px;
    background: rgba(212, 168, 67, .1);
    border: 1px solid rgba(212, 168, 67, .38);
    font-size: .76rem;
    color: var(--cd-muted, #9d97b5);
    flex-wrap: wrap;
    line-height: 1.25;
}
.rk-legends-count .rk-ic { color: var(--rk-gold-hi); width: 1.05em; height: 1.05em; }
.rk-legends-count strong { color: #fff; font-size: 1.15rem; font-weight: 900; }
.rk-legends-count span { max-width: 24ch; }

/* (b) Estadísticas del mes */
/* Estadísticas del mes: filas con ICONO (PNG del usuario) a la izquierda + etiqueta/valor. */
.rk-stat-list { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.rk-stat-list li {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .5rem .15rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.rk-stat-list li:last-child { border-bottom: none; }
.rk-stat-ic {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 7px rgba(0, 0, 0, .45));
}
.rk-stat-body { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.rk-stat-label { color: var(--cd-muted, #9d97b5); font-size: .78rem; }
.rk-stat-value { font-weight: 800; font-size: 1.15rem; color: #fff; white-space: nowrap; line-height: 1.1; }
.rk-stat-money { color: var(--cd-green, #22c55e); }
.rk-stat-soon { color: var(--rk-gold-hi, #f0c060); font-size: .82rem; font-weight: 700; }
.rk-stat-updated {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    font-size: .72rem;
    color: var(--cd-muted, #9d97b5);
}
.rk-stat-updated .rk-ic { color: var(--cd-blue, #3b82f6); }

/* (c) Insignias legendarias */
.rk-badge-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .55rem;
}
.rk-badge { display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center; }
.rk-badge img {
    width: 100%;
    max-width: 62px;
    height: auto;
    filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .45));
    transition: transform .15s;
}
.rk-badge:hover img { transform: translateY(-3px) scale(1.05); }
.rk-badge span {
    font-size: .6rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--cd-text, #f5f3ff);
    text-transform: uppercase;
    letter-spacing: .02em;
}
.rk-badge em { font-style: normal; font-weight: 600; color: var(--cd-muted, #9d97b5); }

/* (d) Cita decorativa */
.rk-quote { position: relative; padding-top: 1.6rem; }
.rk-quote-mark {
    position: absolute;
    top: .35rem;
    left: .9rem;
    font-size: 3rem;
    line-height: 1;
    color: var(--cd-purple, #8b5cf6);
    opacity: .55;
    font-family: Georgia, "Times New Roman", serif;
    z-index: 3;
}
.rk-quote blockquote {
    margin: 0 0 .55rem;
    padding: 0;
    font-size: .9rem;
    line-height: 1.55;
    color: var(--cd-text, #f5f3ff);
    font-style: italic;
}
.rk-quote figcaption { font-size: .78rem; font-weight: 700; color: var(--rk-gold-hi); text-align: right; }

/* ---------------- Estado vacío ---------------- */
.rk-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    border-radius: var(--rk-radius);
    border: 1px dashed var(--cd-line, rgba(139, 92, 246, .28));
    background: var(--cd-surface, #0d0a17);
}
.rk-empty svg { width: 56px; height: 56px; color: var(--rk-gold); opacity: .8; margin-bottom: .5rem; }
.rk-empty h2 { margin: .3rem 0 .5rem; font-size: 1.2rem; font-weight: 800; }
.rk-empty p { margin: 0 auto; max-width: 460px; color: var(--cd-muted, #9d97b5); font-size: .9rem; }

/* ---------------- (7) BENEFICIOS ---------------- */
.rk-perks { margin-top: 2.6rem; }
.rk-perks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .9rem;
}
.rk-perk {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: 1rem .95rem;
    border-radius: 14px;
    border: 1px solid var(--cd-line, rgba(139, 92, 246, .28));
    background: linear-gradient(180deg, rgba(255, 255, 255, .02), transparent), var(--cd-surface, #0d0a17);
    transition: border-color .15s, transform .12s;
}
.rk-perk:hover { border-color: rgba(139, 92, 246, .5); transform: translateY(-2px); }
.rk-perk-ic {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
}
.rk-perk-ic svg { width: 22px; height: 22px; }
.rk-perk-crown { width: 26px; height: auto; }
.rk-perk-purple { color: #c4b5fd; background: radial-gradient(circle at 50% 35%, rgba(139, 92, 246, .32), rgba(139, 92, 246, .10)); border: 1px solid rgba(139, 92, 246, .55); box-shadow: 0 0 14px rgba(139, 92, 246, .25); }
.rk-perk-green  { color: #86efac; background: radial-gradient(circle at 50% 35%, rgba(34, 197, 94, .30), rgba(34, 197, 94, .10)); border: 1px solid rgba(34, 197, 94, .5); box-shadow: 0 0 14px rgba(34, 197, 94, .22); }
.rk-perk-blue   { color: #93c5fd; background: radial-gradient(circle at 50% 35%, rgba(59, 130, 246, .34), rgba(59, 130, 246, .10)); border: 1px solid rgba(59, 130, 246, .55); box-shadow: 0 0 14px rgba(59, 130, 246, .25); }
.rk-perk-gold   { color: #f0c060; background: radial-gradient(circle at 50% 35%, rgba(212, 168, 67, .34), rgba(212, 168, 67, .10)); border: 1px solid rgba(212, 168, 67, .55); box-shadow: 0 0 14px rgba(212, 168, 67, .25); }
.rk-perk-pink   { color: #f9a8d4; background: radial-gradient(circle at 50% 35%, rgba(236, 72, 153, .30), rgba(236, 72, 153, .10)); border: 1px solid rgba(236, 72, 153, .5); box-shadow: 0 0 14px rgba(236, 72, 153, .22); }
.rk-perk-txt { min-width: 0; }
.rk-perk-txt h3 { margin: 0 0 .12rem; font-size: .82rem; font-weight: 800; letter-spacing: .01em; }
.rk-perk-txt p { margin: 0; font-size: .72rem; color: var(--cd-muted, #9d97b5); line-height: 1.35; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet: panel lateral debajo en fila (se auto-ajusta y envuelve). */
@media (max-width: 960px) {
    .rk-layout { grid-template-columns: 1fr; }
    .rk-side { position: static; flex-direction: row; flex-wrap: wrap; }
    .rk-side > .rk-card { flex: 1 1 280px; }
}

/* C20 — aquí vivía un bloque @media 720px que ajustaba el podio. Se elimina porque quedó muerto:
   solo actuaba por debajo de 720px, y ese rango entero lo cubre ahora el bloque de móvil de más
   abajo (≤767.98px), que va después y pisa sus dos reglas. */

/* ============================================================
   C20 — MÓVIL (≤767.98px): el diseño de la referencia.

   767.98px = el MISMO corte que usa el resto del sitio para "celular" (la cabecera móvil global
   y el .ko-nav de las páginas de cuenta). Antes esto vivía en 560px, así que entre 561 y 767 se
   veía el diseño de escritorio comprimido justo donde ya mandaba la cabecera móvil.

   Todo es CSS salvo el icono de carrito: el marcado ya traía cada dato que pide la referencia
   (puesto, avatar, nombre, check, tier, monto, compras), solo estaba colocado como tabla. Al no
   tocar el HTML, el intercambio AJAX de pestañas (ranking.js reemplaza .rk-layout con el mismo
   parcial del servidor) sigue funcionando igual.
   ============================================================ */
@media (max-width: 767.98px) {
    .rk-page { padding: .9rem .7rem 2.5rem; }

    /* El título debe caber en la zona central del marco de laureles (evita solaparse). */
    .rk-hero-crest { width: 97%; }
    .rk-hero-title { font-size: clamp(1.15rem, 5vw, 1.5rem); letter-spacing: .01em; }
    .rk-hero-kicker { font-size: .6rem; letter-spacing: .35em; }

    /* ---------------- PODIO: 2-1-3 EN FILA, como la referencia ----------------
       Antes se apilaba en columna y ocupaba 1082px (tres pantallas para ver el podio). En fila
       mide ~1/5 de eso y se lee de un golpe, que es de lo que va un podio: comparar.
       Los `order` de escritorio (2-1-3) y el realce del 1º se conservan; aquí solo se encoge todo
       para que quepan tres tarjetas en 375px (~113px cada una). */
    .rk-podium { gap: .4rem; margin: 2.4rem 0 1.2rem; }
    .rk-pcard { max-width: none; padding: 1.7rem .3rem .6rem; border-radius: 13px; }
    .rk-podium .rk-p1 { transform: translateY(-10px); padding-top: 2rem; }

    .rk-medal-img { width: 38px; top: -22px; }
    .rk-podium .rk-p1 .rk-medal-img { width: 48px; top: -30px; }

    .rk-podium .rk-avatar { width: 44px; height: 44px; font-size: 1rem; border-width: 2px; }
    .rk-podium .rk-p1 .rk-avatar { width: 52px; height: 52px; font-size: 1.15rem; }
    .rk-avatar-ring { padding: 2px; }

    .rk-pname { margin: .45rem 0 .1rem; font-size: .62rem; gap: .15rem; }
    .rk-check { width: 10px; height: 10px; }
    .rk-heart { width: 9px; height: 9px; margin-left: .12rem; }
    /* El tier puede ser largo ("EMBAJADORA CINEDAR") y aquí hay ~100px: se deja envolver en dos
       líneas en vez de recortarlo, que es el dato que explica el puesto. */
    .rk-ptitle { font-size: .44rem; letter-spacing: .02em; gap: .12rem; line-height: 1.25; text-align: center; }
    .rk-crown { width: 9px; }

    .rk-pamount-box { margin: .5rem 0 .35rem; padding: .35rem .2rem .3rem; border-radius: 9px; }
    .rk-pamount-label { font-size: .4rem; letter-spacing: .06em; margin-bottom: .1rem; }
    .rk-pamount { font-size: .78rem; }
    .rk-podium .rk-p1 .rk-pamount { font-size: .88rem; }

    .rk-pmeta { gap: .2rem; }
    .rk-pmeta-cell { padding: .28rem .1rem; border-radius: 7px; gap: 0; }
    .rk-pmeta-cell strong { font-size: .58rem; }
    .rk-pmeta-cell em { font-size: .4rem; letter-spacing: .01em; line-height: 1.2; text-align: center; }

    /* ---------------- FILAS 4-10: una línea por usuario ----------------
       Antes cada fila era una tarjeta con etiquetas: 226px de alto ×9 = 2034px de scroll para
       leer siete puestos. La referencia los quiere de un vistazo, así que la fila vuelve a ser
       una fila. "Miembro desde" se cae: no cabe y no es lo que se viene a comparar (sigue en el
       podio y en la tabla completa de escritorio). */
    .rk-table { min-width: 0; }
    .rk-table-scroll { overflow-x: visible; }   /* ya no es una tabla ancha: sin scroll lateral */
    .rk-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .rk-table, .rk-table tbody { display: block; width: 100%; }

    .rk-table tbody tr {
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: .5rem .65rem;
        border-bottom: 1px solid rgba(255, 255, 255, .06);
    }
    .rk-table tbody tr:last-child { border-bottom: none; }
    .rk-table tbody td { display: block; border: none; padding: 0; font-size: .78rem; }
    .rk-table tbody td::before { content: none; }   /* fuera las etiquetas: la fila ya se explica sola */

    /* Las 4 celdas que se quedan. OJO con la especificidad: `.rk-table tbody td` de arriba es
       (0,1,2) y le gana a un `.rk-col-*` suelto (0,1,0), así que cualquier regla que toque
       `display` tiene que ir calificada con `td.` o la pisa el bloque genérico. */
    .rk-table tbody td.rk-col-pos { flex: 0 0 auto; }
    /* Sin círculo: en la referencia el puesto es solo el número, y el color ya lo pone el avatar. */
    .rk-pos-badge {
        width: auto; min-width: 15px; height: auto;
        background: none; border: none; border-radius: 0;
        font-size: .74rem; color: var(--cd-muted, #9d97b5);
    }
    .rk-table tbody td.rk-col-user { flex: 1 1 auto; min-width: 0; }
    .rk-user { display: flex; gap: .45rem; }
    .rk-user-name { font-size: .78rem; max-width: none; }
    .rk-user-tier { font-size: .58rem; }
    .rk-avatar-sm { width: 30px; height: 30px; font-size: .68rem; }
    .rk-table tbody td.rk-col-amount { flex: 0 0 auto; font-size: .78rem; }
    .rk-table tbody td.rk-col-buys {
        flex: 0 0 auto;
        display: inline-flex; align-items: center; gap: .25rem;
        color: var(--cd-muted, #9d97b5);
    }
    .rk-buys-ic { display: block; width: 13px; height: 13px; opacity: .75; }
    /* "Miembro desde" fuera: no cabe en una línea y no es lo que se compara aquí. Sigue en el
       podio y en la tabla completa de escritorio. */
    .rk-table tbody td.rk-col-since { display: none; }

    .rk-more-wrap { padding: .75rem; }

    /* ---------------- LEYENDAS: en horizontal ---------------- */
    .rk-legends {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: .1rem .75rem;
        text-align: left;
    }
    .rk-legends-crest { width: 58px; margin: 0; grid-row: span 2; }
    .rk-legends-title { font-size: .72rem; letter-spacing: .08em; margin: 0; align-self: end; }
    .rk-legends-text { margin: 0; font-size: .64rem; max-width: none; line-height: 1.4; align-self: start; }
    .rk-legends-count { grid-column: 1 / -1; margin-top: .6rem; padding: .4rem .7rem; font-size: .66rem; }
    .rk-legends-count strong { font-size: .95rem; }
    .rk-legends-count span { max-width: none; }

    /* ---------------- ESTADÍSTICAS: rejilla 2×2 ----------------
       En lista vertical medían 343px; en 2×2 se ven las cuatro cifras a la vez, que es como las
       muestra la referencia. */
    .rk-stat-list { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin-bottom: .6rem; }
    .rk-stat-list li {
        gap: .45rem;
        padding: .5rem .45rem;
        border-bottom: none;
        border: 1px solid rgba(255, 255, 255, .07);
        border-radius: 11px;
        background: rgba(255, 255, 255, .02);
        min-width: 0;
    }
    .rk-stat-ic { width: 26px; height: 26px; }
    .rk-stat-label { font-size: .56rem; line-height: 1.25; }
    /* Sin nowrap: "S/ 38,450.90" en media tarjeta se saldría en los móviles estrechos. */
    .rk-stat-value { font-size: .8rem; white-space: normal; overflow-wrap: anywhere; }
    .rk-stat-updated { font-size: .62rem; }

    /* ---------------- INSIGNIAS: fila de 4 compacta ---------------- */
    .rk-badge-grid { gap: .35rem; }
    .rk-badge img { max-width: 44px; }
    .rk-badge span { font-size: .46rem; letter-spacing: 0; }

    .rk-quote blockquote { font-size: .84rem; }

    /* ---------------- BENEFICIOS: fuera en móvil ----------------
       La referencia termina en la cita. En escritorio se conservan intactos. */
    .rk-perks { display: none; }
}

/* Móvil estrecho (≤360px): el podio es lo único que va justo de ancho. */
@media (max-width: 360px) {
    .rk-page { padding: .9rem .45rem 2.5rem; }
    .rk-podium { gap: .28rem; }
    .rk-pcard { padding-left: .2rem; padding-right: .2rem; }
    .rk-pname { font-size: .56rem; }
    .rk-pamount { font-size: .68rem; }
    .rk-podium .rk-p1 .rk-pamount { font-size: .78rem; }
    .rk-pmeta-cell strong { font-size: .52rem; }
}

/* =====================================================================================
   C13 — RANKING DE DONACIONES. Reutiliza el lenguaje visual del ranking (bordes cónicos
   morados, oro/plata/bronce, tarjetas .rk-card). Solo añade lo específico de donaciones.
   ===================================================================================== */

/* Hero variante donaciones: corazón + título con acento rosa/morado/oro. */
.rk-hero-titles-don { gap: .35rem; }
.rk-hero-heart {
    color: #f472b6;
    filter: drop-shadow(0 0 12px rgba(236, 72, 153, .55));
}
.rk-hero-heart svg { width: 40px; height: 40px; display: block; }
.rk-hero-don .rk-hero-title {
    background: linear-gradient(100deg, #f9a8d4 0%, #c4b5fd 38%, var(--rk-gold-hi) 72%, var(--rk-gold) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: clamp(1.5rem, 5.2vw, 2.6rem);
}

/* Pill "Periodo del ranking" (calcado del look de .rk-hero-month, con icono + rango). */
.rk-hero-period {
    display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    justify-content: center;
    margin-top: .9rem; padding: .5rem .95rem;
    border-radius: 999px;
    border: 1px solid rgba(167, 139, 250, .5);
    background: rgba(139, 92, 246, .12);
    box-shadow: 0 0 16px rgba(139, 92, 246, .18) inset;
}
.rk-hero-period .rk-ic { width: 16px; height: 16px; color: #c4b5fd; }
.rk-hero-period-label { font-size: .74rem; color: #cdc7e0; text-transform: uppercase; letter-spacing: .06em; }
.rk-hero-period-range { font-size: .84rem; color: #fff; font-weight: 800; }

/* Avatar anónimo: sin PII, glifo de corazón sobre fondo neutro. */
.rk-avatar-anon {
    background: radial-gradient(circle at 50% 35%, rgba(148, 163, 184, .28), rgba(100, 116, 139, .12));
    color: #cbd5e1; display: grid; place-items: center;
}
.rk-avatar-anon svg { width: 46%; height: 46%; opacity: .85; }
.rk-avatar-md { width: 46px; height: 46px; font-size: 1.05rem; }

/* Título de reconocimiento (por cantidad) en podio/tabla. */
.rk-ptitle-don { color: #d7c4ff; }
.rk-user-tier-don { color: #c4b5fd; }
.rk-pamount-date { display: block; margin-top: .15rem; font-size: .64rem; color: var(--cd-muted, #9d97b5); }
.rk-amount-sub { display: block; font-size: .66rem; color: var(--cd-muted, #9d97b5); font-weight: 500; margin-top: .1rem; }
.rk-empty-don svg { color: #f472b6; }

/* Aviso de actualización (honesto: no hay tiempo real). */
.rk-live {
    display: flex; align-items: center; gap: .5rem;
    padding: .6rem .85rem; border-radius: 12px;
    border: 1px solid rgba(34, 197, 94, .4);
    background: rgba(34, 197, 94, .08);
    color: #a7f3d0; font-size: .78rem; font-weight: 600;
}
.rk-live-dot {
    width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
    background: #22c55e; box-shadow: 0 0 8px #22c55e;
    animation: rk-pulse 2s ease-in-out infinite;
}
@keyframes rk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Botón "Realizar una donación" (rosa→morado, prominente). */
.rk-donate-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    width: 100%; box-sizing: border-box;
    padding: .7rem 1rem; border-radius: 12px;
    font-size: .84rem; font-weight: 800; letter-spacing: .01em;
    color: #fff; text-decoration: none; cursor: pointer;
    border: 1px solid rgba(236, 72, 153, .55);
    background: linear-gradient(100deg, #db2777, #8b5cf6);
    box-shadow: 0 6px 18px rgba(219, 39, 119, .3);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.rk-donate-btn svg { width: 17px; height: 17px; }
.rk-donate-btn:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 8px 22px rgba(219, 39, 119, .4); }
.rk-donate-btn:active { transform: translateY(0); }
.rk-donate-btn:focus-visible { outline: 2px solid #f9a8d4; outline-offset: 2px; }
.rk-donate-big { padding: .8rem 1rem; font-size: .9rem; margin-top: .4rem; }
.rk-donate-ghost {
    background: transparent; color: #d7c4ff;
    border-color: rgba(167, 139, 250, .5); box-shadow: none;
}
.rk-donate-ghost:hover { background: rgba(139, 92, 246, .12); filter: none; }

/* TU POSICIÓN. */
.rk-tp-head {
    margin: 0 0 .7rem; font-size: .95rem; font-weight: 800;
    text-align: center; color: #fff;
    padding-bottom: .55rem; border-bottom: 1px solid rgba(167, 139, 250, .22);
}
.rk-about .rk-card-title { text-align: left; }
.rk-tp-msg { margin: 0 0 .75rem; color: var(--cd-muted, #9d97b5); font-size: .82rem; text-align: center; }
.rk-tp-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.rk-tp-badge {
    flex: 0 0 auto; min-width: 34px; height: 34px; padding: 0 .5rem;
    display: grid; place-items: center; border-radius: 9px;
    font-weight: 800; font-size: .82rem; color: #fff;
    background: linear-gradient(180deg, rgba(139, 92, 246, .5), rgba(139, 92, 246, .2));
    border: 1px solid rgba(167, 139, 250, .55);
}
.rk-tp-id { min-width: 0; display: flex; flex-direction: column; }
.rk-tp-name { font-size: .9rem; font-weight: 800; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-tp-since { font-size: .7rem; color: var(--cd-muted, #9d97b5); }
.rk-tp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .6rem; }
.rk-tp-stat {
    display: flex; flex-direction: column; align-items: center; gap: .1rem;
    padding: .6rem .4rem; border-radius: 10px;
    background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07);
    text-align: center;
}
.rk-tp-stat svg { width: 18px; height: 18px; color: #f472b6; }
.rk-tp-stat strong { font-size: 1.05rem; color: #fff; }
.rk-tp-stat span { font-size: .66rem; color: var(--cd-muted, #9d97b5); }
.rk-tp-money { font-size: 1.05rem; font-weight: 800; color: #86efac; }
.rk-tp-progress {
    margin: 0 0 .7rem; padding: .5rem .6rem; border-radius: 9px;
    font-size: .74rem; color: #fde68a;
    background: rgba(252, 211, 77, .08); border: 1px solid rgba(252, 211, 77, .3);
}

/* ACERCA DE LAS DONACIONES. */
.rk-about-intro { margin: 0 0 .8rem; font-size: .8rem; color: var(--cd-muted, #9d97b5); line-height: 1.45; }
.rk-about-list { list-style: none; margin: 0 0 .9rem; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.rk-about-list li { display: flex; align-items: flex-start; gap: .6rem; }
.rk-about-list svg { width: 20px; height: 20px; flex: 0 0 auto; color: #c4b5fd; margin-top: .1rem; }
.rk-about-list span { display: flex; flex-direction: column; min-width: 0; }
.rk-about-list strong { font-size: .8rem; font-weight: 800; color: #efe9ff; }
.rk-about-list em { font-style: normal; font-size: .72rem; color: var(--cd-muted, #9d97b5); line-height: 1.3; }
.rk-about-foot { margin: .7rem 0 0; text-align: center; font-size: .78rem; color: #f9a8d4; font-weight: 700; }

/* BENEFICIOS (4 tarjetas de la maqueta) — mismo patrón que .rk-perks. */
.rk-benefits { margin-top: 1.5rem; }
.rk-benefits-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;
}
.rk-benefit {
    display: flex; align-items: center; gap: .8rem;
    padding: 1rem; border-radius: var(--rk-radius);
    background: var(--cd-surface-2, #120e20); border: 1px solid rgba(255, 255, 255, .07);
    transition: border-color .15s ease, transform .15s ease;
}
.rk-benefit:hover { border-color: rgba(139, 92, 246, .5); transform: translateY(-2px); }
.rk-benefit-ic {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
    display: grid; place-items: center;
}
.rk-benefit-ic svg { width: 22px; height: 22px; }
.rk-benefit-txt { min-width: 0; }
.rk-benefit-txt h3 { margin: 0 0 .15rem; font-size: .86rem; font-weight: 800; }
.rk-benefit-txt p { margin: 0; font-size: .74rem; color: var(--cd-muted, #9d97b5); line-height: 1.35; }

/* El botón flotante de donación (dn-float) se OCULTA en esta página: la CTA es el botón del
   panel lateral. data-cd-donar sigue funcionando aunque el flotante esté oculto (se hace .click()). */
.rk-page-don ~ .dn-float { display: none; }

/* Móvil: el aviso de actualización a ancho completo cuando el lado se vuelve fila (960px). */
@media (max-width: 960px) {
    .rk-side > .rk-live { flex: 1 1 100%; }
}