/** CSS RANKING APP vFinal-Mobile-Ready */

#ranking-view {
    display: flex; flex-direction: column;
    background: #f8f9fa; 
    width: 100%; height: 100%; 
    position: fixed; top: 75px; left: 0; 
    z-index: 2000; overflow: hidden; padding: 0 !important;
}

.rk-master-container { width: 100%; max-width: 600px; margin: 0 auto; padding: 0 15px; box-sizing: border-box; }

/* HEADER */
.ranking-fixed-top { flex: 0 0 auto; background: #f8f9fa; width: 100%; z-index: 50; padding-bottom: 5px; border-bottom: 1px solid rgba(0,0,0,0.05); box-shadow: 0 4px 15px rgba(0,0,0,0.02); }
.rk-main-title { font-family: 'Crimson Pro', serif; font-size: 2rem; font-weight: 900; color: #2d5a27; text-align: center; margin: 10px 0 2px 0; }
.ranking-subtitle { text-align: center; font-weight: 700; color: #999; font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 15px; }

/* FILTROS */
.rk-filter-box { display: flex; flex-direction: column; gap: 8px; margin-bottom: 15px; width: 100%; }
.rk-pill-row { background: #e9ecef; border-radius: 12px; padding: 4px; display: flex; width: 100%; }
.rk-pill, .rk-pill-time { flex: 1; border: none; background: transparent; padding: 8px 0; border-radius: 9px; font-size: 0.8rem; font-weight: 700; color: #7f8c8d; cursor: pointer; transition: 0.2s; text-align: center; }
.rk-pill.active { background: #fff; color: #2d5a27; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.rk-pill-time.active { background: #e67e22; color: #fff; box-shadow: 0 2px 5px rgba(230, 126, 34, 0.3); }

/* GRID */
.rk-grid-layout { display: grid; grid-template-columns: 50px 1fr 90px; align-items: center; gap: 10px; }
.rk-col-header { font-size: 0.65rem; font-weight: 800; color: #aaa; text-transform: uppercase; letter-spacing: 0.5px; padding: 0 10px 8px 10px; margin-top: 5px; }
.rk-col-header span:nth-child(1) { text-align: center; } 
.rk-col-header span:nth-child(2) { text-align: left; }
.rk-col-header span:nth-child(3) { text-align: right; }

/* SCROLL */
.ranking-scroll-area { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-top: 10px; background: #f8f9fa; padding-bottom: 200px; width: 100%; }
.ranking-list-container { display: flex; flex-direction: column; gap: 8px; }

/* TARJETAS */
.rank-card {
    background: #fff; border-radius: 14px; padding: 12px 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02); border: 1px solid #fff;
    width: 100%; box-sizing: border-box; display: grid; grid-template-columns: 50px 1fr 90px; align-items: center; gap: 10px;
}
.rank-card.gold { border-left: 4px solid #f1c40f; background: linear-gradient(90deg, #fffdf5 0%, #fff 100%); }
.rank-card.silver { border-left: 4px solid #bdc3c7; }
.rank-card.bronze { border-left: 4px solid #d35400; }

.rk-pos-badge { width: 100%; display: flex; align-items: center; justify-content: center; font-family: 'Crimson Pro', serif; font-weight: 800; font-size: 1.2rem; color: #ccc; }
.rank-card.gold .rk-pos-badge { color: #f1c40f; font-size: 1.4rem; }
.rank-card.silver .rk-pos-badge { color: #95a5a6; font-size: 1.3rem; }
.rank-card.bronze .rk-pos-badge { color: #d35400; font-size: 1.3rem; }

.rk-info-flex { display: flex; align-items: center; overflow: hidden; width: 100%; }
.rk-shield { width: 32px; height: 32px; object-fit: contain; margin-right: 10px; flex-shrink: 0; }
.rk-shield-fallback { width: 32px; height: 32px; margin-right: 10px; flex-shrink: 0; border-radius: 8px; background: #f0f0f0; color: #aaa; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }
.rk-shield-fallback.prov-icon { background: #e3f2fd; color: #2196f3; }

.rk-texts { display: flex; flex-direction: column; overflow: hidden; flex: 1; cursor: pointer; /* Indicar clicable */ }
.rk-main-txt { font-weight: 700; color: #333; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.rk-sub-txt { font-size: 0.75rem; color: #999; display: flex; align-items: center; gap: 4px; }
.rk-gift-icon { color: #e74c3c; animation: wobble 2s infinite; margin-left: 4px; font-size: 0.9rem; }
.rk-points { font-family: 'Crimson Pro', serif; font-weight: 900; font-size: 1.1rem; color: #2d5a27; text-align: right; white-space: nowrap; }

/* FOOTER FLOTANTE */
.ranking-footer-wrapper { position: absolute; bottom: 90px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 450px; z-index: 100; }
.rk-my-card { display: flex; align-items: center; background: #222; color: white; border-radius: 50px; padding: 8px 15px; box-shadow: 0 15px 40px rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.15); }
.rk-my-pos { background: #f1c40f; color: #333; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.9rem; margin-right: 12px; flex-shrink: 0; }
.rk-my-info { flex: 1; overflow: hidden; }
.rk-my-name { font-weight: 800; font-size: 0.9rem; margin-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.rk-my-pts { font-size: 0.75rem; opacity: 0.8; color: #ddd; }
.rk-divider-vert { width: 1px; height: 25px; background: rgba(255,255,255,0.2); margin: 0 10px; }
.rk-action-btn { background: transparent; border: none; color: #fff; width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; cursor: pointer; transition: 0.2s; }
.rk-action-btn:hover { background: rgba(255,255,255,0.2); }

.gift-toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(30,30,30,0.95); color: white; padding: 25px 40px; border-radius: 20px; font-size: 1rem; opacity: 0; visibility: hidden; transition: 0.3s; z-index: 200; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.6); pointer-events: none; }
.gift-toast.show { opacity: 1; visibility: visible; }

/* BLOQUEO LANDSCAPE */
#landscape-warning {
    display: none; /* Oculto por defecto */
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #222; color: #fff; z-index: 9999;
    flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 20px;
}

/* ACTIVAR BLOQUEO SOLO EN MÓVILES TUMBADOS */
@media screen and (orientation: landscape) and (max-height: 500px) {
    #landscape-warning { display: flex !important; }
    #ranking-view > *:not(#landscape-warning) { display: none !important; } /* Ocultar todo lo demás */
}

@keyframes wobble { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-10deg)} 75%{transform:rotate(10deg)} }

/* --- EXTRAS VISUALES (LA GUINDA) --- */

/* 1. Animación de entrada suave */
@keyframes slideInCard {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Por defecto la tarjeta es invisible hasta que anima */
.rank-card {
    opacity: 0; 
    animation: slideInCard 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* 2. Resaltar MI tarjeta en la lista */
.rank-card.is-me {
    border: 2px solid #2d5a27; /* Borde verde corporativo */
    background-color: #f4fcf6; /* Fondo verde muy sutil */
    transform: scale(1.02); /* Un pelín más grande */
    box-shadow: 0 4px 12px rgba(45, 90, 39, 0.15);
    z-index: 2; /* Por encima de las otras */
}