:root {
    --poi-color-extreme-pessimism: #C0392B; --poi-color-pessimism: #E74C3C; --poi-color-neutral: #026580; 
    --poi-color-optimism: #2ECC71; --poi-color-extreme-optimism: #27AE60;
    --poi-bg-color: #f9f9ff; --poi-panel-bg-color: #ffffff; --poi-border-color: #e0e0e0; 
    --poi-accent-color: #026580; --poi-text-color: #333; --poi-border-radius: 8px; 
    --poi-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.poi-container { 
    display: flex; flex-direction: column; 
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    padding: 20px; border-radius: var(--poi-border-radius); border: 1px solid var(--poi-border-color); 
    background-color: var(--poi-bg-color); position: relative; box-shadow: var(--poi-box-shadow); 
    max-width: 100%; box-sizing: border-box; margin-bottom: 20px;
}
.poi-global-loader { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(249, 249, 249, 0.9); z-index: 10; justify-content: center; align-items: center; border-radius: var(--poi-border-radius); }
.poi-container.poi-loading .poi-global-loader { display: flex; }
.poi-loader-spinner { border: 6px solid #f3f3f3; border-top: 6px solid var(--poi-accent-color); border-radius: 50%; width: 60px; height: 60px; animation: poi-spin 1s linear infinite; }
@keyframes poi-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.poi-tabs-nav { display: flex; border-bottom: 1px solid var(--poi-border-color); margin-bottom: 20px; text-align: center; }
.poi-tabs-nav-item { flex-grow: 1; padding: 10px 15px; cursor: pointer; background-color: #f1f1f1; border: 1px solid var(--poi-border-color); border-bottom: none; border-radius: 4px 4px 0 0; text-decoration: none; color: var(--poi-text-color); margin-right: 2px; transition: all 0.2s ease-in-out; }
.poi-tabs-nav-item:last-child { margin-right: 0; }
.poi-tabs-nav-item:hover { background-color: #e9ecef; }
.poi-tabs-nav-item.active { background-color: var(--poi-panel-bg-color); border-bottom: 1px solid var(--poi-panel-bg-color); font-weight: bold; color: var(--poi-accent-color); }
.poi-tab-panel { display: none; }
.poi-tab-panel.active { display: block; animation: poi-fadein 0.4s ease-out; }
@keyframes poi-fadein { from { opacity: 0; } to { opacity: 1; } }

/* === INICIO DE LA MODIFICACIÓN ESTÉTICA === */
.poi-column { 
    background-color: var(--poi-panel-bg-color); padding: 25px; border-radius: var(--poi-border-radius); 
    display: flex; flex-direction: column; align-items: center; border: 1px solid var(--poi-border-color);
    position: relative; z-index: 1;
}
/* Pseudo-elemento para el logo de fondo */
.poi-column::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-position: center center; background-repeat: no-repeat; background-size: contain;
    opacity: 0.075; /* Sutil, como en el otro plugin */
    z-index: -1; border-radius: var(--poi-border-radius);
}
/* === FIN DE LA MODIFICACIÓN ESTÉTICA === */

.poi-title { margin: 0 0 10px 0; font-size: 1.3em; color: var(--poi-text-color); font-weight: 600; text-align: center; }
.poi-gauge-label { text-align: center; margin-bottom: 5px; order: -1; }
#poi-gauge-value { font-size: 3.5em; font-weight: 700; line-height: 1.1; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; transition: color 0.5s ease; }
#poi-gauge-sentiment { font-size: 1.2em; font-weight: 500; display: block; }
.poi-gauge-wrapper { position: relative; width: 100%; max-width: 400px; margin: 0 auto; }
/* === INICIO DE LA MODIFICACIÓN: Aguja del velocímetro mejorada === */
#poi-gauge-needle {
    position: absolute; bottom: 0; left: 50%; width: 4px; height: 52%;
    background: linear-gradient(to top, #333, #666); /* Gradiente sutil */
    transform-origin: bottom center; transform: translateX(-50%) rotate(0deg);
    border-radius: 4px 4px 0 0; box-shadow: 0 0 8px rgba(0,0,0,0.3);
    transition: transform 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    z-index: 2; /* Asegura que esté sobre el gráfico */
}
#poi-gauge-needle::after {
    content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
    width: 20px; height: 20px; background-color: #2c3e50; border: 2px solid #fff;
    border-radius: 50%; box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
/* === FIN DE LA MODIFICACIÓN === */
.poi-chart-header { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 15px; flex-wrap: wrap; }
.poi-chart-header .poi-title { margin: 0; }
/* === INICIO DE LA MODIFICACIÓN: Añadido flex-wrap para los nuevos filtros === */
.poi-chart-filters { display: flex; gap: 5px; flex-wrap: wrap; }
/* === FIN DE LA MODIFICACIÓN === */
.poi-chart-filter-btn { background: #f1f1f1; border: 1px solid #ccc; padding: 5px 12px; cursor: pointer; border-radius: 4px; transition: all 0.2s ease; }
.poi-chart-filter-btn:hover { background-color: #e0e0e0; }
.poi-chart-filter-btn.active { background: var(--poi-accent-color); color: white; border-color: var(--poi-accent-color); }
.poi-chart-wrapper { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 450px; }

@media (max-width: 768px) { 
    .poi-container { padding: 10px; }
    .poi-column { padding: 15px; }
    .poi-title { font-size: 1.1em; }
    #poi-gauge-value { font-size: 2.8em; }
    #poi-gauge-sentiment { font-size: 1em; }
    .poi-chart-header { flex-direction: column; gap: 15px; } 
    .poi-chart-filters { justify-content: center; } /* Centrar filtros en móvil */
    .poi-chart-wrapper { aspect-ratio: 4 / 3; } 
    .poi-tabs-nav-item { padding: 12px 10px; font-size: 0.9em; flex-grow: 1; text-align: center; } 
}