/* feedback-stats.css */

/* Contenedor general */
#feedback-stats {
    background: var(--color-bg);
    padding: var(--spacing-lg) 0;
}

/* Título */
#feedback-stats-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--color-text);
}

/* Filtro */
#sentiment-filter {
    max-width: 200px;
}

/* Wrapper de cada tarjeta */
.stat-card-wrapper {
    position: relative; /* ancla para el overlay */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: visible; /* que no recorte el overlay */
}

    /* Hover sobre el wrapper (mueve todo, incluido el overlay) */
    .stat-card-wrapper:hover {
        transform: translateY(-4px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    }

    /* Estilos por partido */
    .stat-card-wrapper.union-por-la-patria .stat-card {
        border: 3px solid #3777B8;
        box-shadow: 0 4px 12px rgba(55, 119, 184, 0.3);
    }

    .stat-card-wrapper.juntos-por-el-cambio .stat-card {
        border: 3px solid #FFD700;
        box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
    }

    .stat-card-wrapper.la-libertad-avanza .stat-card {
        border: 3px solid #5A2C81;
        box-shadow: 0 4px 12px rgba(90, 44, 129, 0.3);
    }
/* .stat-card-wrapper.otras-fuerzas si aplica */


/* El propio contenido de la tarjeta */
.stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: none; /* lo controlamos en el wrapper */
}

/* Overlay del logo del partido */
.party-logo-overlay {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    background: white;
    z-index: 1; /* asegúrate que quede encima */
}

    .party-logo-overlay img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Foto redonda del candidato */
.stat-photo {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: var(--spacing-sm);
}

/* Gráfico de barras */
.stat-chart {
    width: 100% !important;
    max-height: 200px;
    margin-bottom: var(--spacing-sm);
}

/* Rótulo */
.stat-label {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
}