/* Estilos mínimos para el gráfico de desinformación */
#desinformacion-chart {
    width: 100%;
    margin: 0 auto;
    overflow: visible; /* Asegura que nada se recorte */
}

/* Estilos para las barras del gráfico */
.bar {
    fill: #ef4444; /* Rojo para desinformación */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.9;
    cursor: pointer;
    border-radius: 4px 4px 0 0;
}

/* Colores específicos para cada categoría */
/* Colores específicos eliminados para permitir tonos dinámicos */

/* Ejes del gráfico */
.axis text {
    font-family: Arial, sans-serif;
    font-size: 0.85rem;
    fill: #4b5563;
}

.axis path,
.axis line {
    stroke: #e5e7eb;
    shape-rendering: crispEdges;
}

/* Tooltip */
.tooltip {
    position: absolute;
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.85);
    color: white;
    border-radius: 4px;
    font-size: 0.9rem;
    pointer-events: none;
    opacity: 0;
    z-index: 100;
}

/* --- Overrides específicos para la sección de Desinformación --- */
.section-desinformacion .chart-container {
    height: auto !important; /* Permitir que el contenedor crezca */
    min-height: 450px; /* Altura mínima razonable */
    overflow: visible !important; /* Evita que se recorte el SVG */
}

/* Remover superposición decorativa que tapa el gráfico (definida en styles.css) */
.section-desinformacion .chart-container::before {
    display: none !important;
}

/* Ajustes responsivos */
@media (max-width: 768px) {
    #desinformacion-chart {
    }
}