/* ESTILOS STATS v4 (Espaciado Profesional) */
.stats-wrapper { 
    width: 100%; 
    max-width: 600px; 
    margin: 0 auto; 
    /* Reducimos el padding inferior para acercar el footer */
    padding: 0 15px 10px; 
}

/* USER CARD */
.main-stats-card { background: #fff; border-radius: 25px; padding: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); margin-bottom: 20px; position: relative; overflow: hidden; border-top: 5px solid #2d5a27; }

.user-hero-centered { text-align: center; }
.user-name-title { font-family: 'Crimson Pro', serif; font-size: 2rem; font-weight: 800; color: #222; margin-bottom: 15px; }

.ranks-container { display: flex; justify-content: center; gap: 15px; }
.rank-pill { background: #f8f9fa; border: 1px solid #eee; padding: 8px 15px; border-radius: 12px; min-width: 100px; }
.rank-pill .lbl { display: block; font-size: 0.6rem; color: #999; font-weight: 800; letter-spacing: 0.5px; margin-bottom: 2px; }
.rank-pill .val { font-size: 1.1rem; font-weight: 900; color: #333; }

.level-status-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 8px; }
.level-label { font-size: 0.75rem; font-weight: 700; color: #aaa; }
.level-val-big { font-size: 1.4rem; font-weight: 800; color: #2d5a27; font-family: 'Crimson Pro'; line-height: 1; }

.progress-container { background: #eee; border-radius: 50px; height: 12px; width: 100%; overflow: hidden; margin-bottom: 8px; }
.progress-bar-fill { height: 100%; background: linear-gradient(90deg, #2d5a27 0%, #f1c40f 100%); width: 0%; border-radius: 50px; transition: width 1s ease-out; }
.progress-percent-text { font-size: 0.8rem; color: #777; text-align: right; font-style: italic; }

/* TOWN CARD */
.town-stats-card { background: #fff; border-radius: 20px; padding: 15px; display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.03); border: 1px solid #f0f0f0; margin-bottom: 25px; gap: 10px; }
.town-shield-wrapper { width: 50px; height: 50px; }
.town-shield-img { width: 100%; height: 100%; object-fit: contain; }
.town-intro { font-size: 0.95rem; color: #555; }
.town-ranks-text { background: #e8f5e9; padding: 8px 15px; border-radius: 10px; font-size: 0.85rem; color: #2d5a27; width: 100%; }

/* GRID */
.stats-grid-fluid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 25px; }
@media (min-width: 500px) { .stats-grid-fluid { grid-template-columns: 1fr 1fr 1fr; } }

.stat-card-mini { background: #fff; border-radius: 18px; padding: 15px 10px; position: relative; text-align: center; border: 1px solid #f0f0f0; box-shadow: 0 5px 15px rgba(0,0,0,0.02); display: flex; flex-direction: column; align-items: center; }

.stat-card-mini.success-border { border-bottom: 3px solid #27ae60; }
.stat-card-mini.error-border { border-bottom: 3px solid #c0392b; }
.stat-card-mini.info-border { border-bottom: 3px solid #8e44ad; }
.highlight-card { border-bottom: 3px solid #f1c40f; background: #fffdf9; }
.gray-card { border-bottom: 3px solid #95a5a6; background: #fdfdfd; }

.stat-icon { font-size: 1.4rem; margin-bottom: 5px; }
.stat-val { font-size: 1.4rem; font-weight: 800; color: #333; font-family: 'Crimson Pro'; line-height: 1; margin: 5px 0; }
.stat-lbl { font-size: 0.65rem; color: #999; text-transform: uppercase; font-weight: 700; }
.info-toast-trigger { position: absolute; top: 8px; right: 8px; font-size: 0.9rem; color: #eee; cursor: pointer; }
.stat-card-mini:hover .info-toast-trigger { color: #bbb; }

/* TOAST */
.stat-toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px); width: 90%; max-width: 350px; background: rgba(30,30,30,0.95); color: #fff; padding: 15px; border-radius: 12px; z-index: 9999; opacity: 0; pointer-events: none; transition: 0.3s; backdrop-filter: blur(4px); text-align: left; }
.stat-toast.active { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.toast-title { font-weight: 800; font-size: 0.9rem; color: #f1c40f; margin-bottom: 4px; }
.toast-body { font-size: 0.85rem; color: #ddd; line-height: 1.4; }

/* GRÁFICA CARD (Sin margen extra abajo) */
.chart-card { 
    background: #fff; border-radius: 25px; padding: 20px; 
    box-shadow: 0 5px 20px rgba(0,0,0,0.03); 
    /* Margen justo para separar del botón, pero no excesivo */
    margin-bottom: 10px; 
}
.chart-title { margin: 0 0 15px 0; font-size: 0.9rem; color: #555; text-transform: uppercase; text-align: center; letter-spacing: 1px; }

/* BUTTONS */
.btn-continue-journey { 
    background: #2d5a27; color: white; width: 100%; 
    padding: 16px; border-radius: 15px; font-weight: 800; font-size: 1rem; 
    border: none; cursor: pointer; 
    /* Aumentamos el margen superior para despegarlo de la gráfica */
    margin-top: 25px; 
    margin-bottom: 5px; 
    display: flex; justify-content: center; align-items: center; gap: 10px; 
    box-shadow: 0 8px 20px rgba(45, 90, 39, 0.2);
}
.btn-continue-journey:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(45, 90, 39, 0.3); }