/* ==========================================================================
   PUESTITO PE — DISEÑO ORIGINAL, MODERNO Y EXCLUSIVO (ROJO PERÚ)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap');

:root {
    --rojo-peru: #DC2626;
    --rojo-oscuro: #991B1B;
    --rojo-claro: #FEE2E2;
    --rojo-suave: #FEF2F2;
    --bg-page: #F8FAFC;
    --text-primary: #0F172A;
    --text-secondary: #64748B;
    --card-border: #E2E8F0;
}

/* Reset de subrayados en toda la app */
.puestito-wrapper * {
    text-decoration: none !important;
    box-sizing: border-box;
}

.puestito-wrapper {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-page);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
}

/* Punto de presencia en vivo */
@keyframes redPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.35); opacity: 0.45; }
}

.live-pulse-dot {
    animation: redPulse 1.8s ease-in-out infinite;
}

/* Tarjeta Spotlight #1 (Líder del Ranking) */
.spotlight-king-card {
    background: #FFFFFF;
    border: 2px solid var(--rojo-peru);
    border-radius: 20px;
    box-shadow: 0 12px 30px -10px rgba(220, 38, 38, 0.18);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.spotlight-king-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -10px rgba(220, 38, 38, 0.24);
}

/* Fila de Leaderboard (#2 en adelante) */
.leaderboard-row {
    background: #FFFFFF;
    border: 1px solid var(--card-border);
    border-radius: 16px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.leaderboard-row:hover {
    border-color: #CBD5E1;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -4px rgba(15, 23, 42, 0.06);
}

/* Botón de acción principal Rojo Perú */
.btn-primary-red {
    background-color: var(--rojo-peru);
    color: #FFFFFF;
    border-radius: 14px;
    font-weight: 800;
    transition: all 0.15s ease;
    border: 0;
    cursor: pointer;
}

.btn-primary-red:hover {
    background-color: var(--rojo-oscuro);
    transform: translateY(-1px);
}

.btn-primary-red:active {
    transform: scale(0.99);
}

/* Modal */
.modal-overlay-show {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.sticky-header-show {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}