/* Envoltura del termómetro de reputación */
.dt24-thermometer-wrapper {
    width: 100%;
    margin-bottom: 24px;
    position: relative;
    padding: 0 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
    height: 12px;
}

/* Base de los segmentos (fondo claro inactivo) */
.dt24-thermometer-segment {
    height: 11px;
    flex: 1;
    border-radius: 1px;
    transition: all 0.3s ease;
    background-color: #f5f5f5; /* Color gris muy claro por defecto si no hay clase */
}

/* Colores INACTIVOS base específicos para cuando no están "llenos" pero mantienen su tono */
.dt24-thermometer-segment.level-1 { background-color: #ffedeb; }
.dt24-thermometer-segment.level-2 { background-color: #ffebd5; }
.dt24-thermometer-segment.level-3 { background-color: #fff6cc; }
.dt24-thermometer-segment.level-4 { background-color: #e6f7e9; }
.dt24-thermometer-segment.level-5 { background-color: #e6f7e9; } /* usamos el mismo fondo sutil verde */

/* 
 Lógica de relleno (Fill): Si estamos en un nivel, rellenamos con color fuerte ese nivel 
 Y TODOS los niveles anteriores. Lo controlamos desde la vista PHP asignando una clase
 'filled' a los que deban ir pintados fuertes. 
 Aumento de especificidad para asegurar que reemplace los colores base.
*/
div.dt24-thermometer-segment.level-1.filled { background-color: #ff5a5f !important; height: 12px !important; }
div.dt24-thermometer-segment.level-2.filled { background-color: #ff9800 !important; height: 12px !important; }
div.dt24-thermometer-segment.level-3.filled { background-color: #baac11 !important; height: 12px !important; }
div.dt24-thermometer-segment.level-4.filled { background-color: #00a650 !important; height: 12px !important; }

/* El bloque ESTRICTAMENTE ACTIVO puede tener un pequeño plus visual si se desea, 
   o simplemente dejarse con la clase filled normal */

/* Contenedor de columnas flex */
.stats-columns {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: stretch;
    width: 100%;
}

/* Cada columna de estadística */
.stat-column {
    text-align: center;
    flex: 1;
    padding: 0 15px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Línea separadora entre columnas */
.stat-column:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 15%;
    height: 70%;
    width: 1px;
    background-color: #e5e7eb;
}

/* Valor grande de la estadística */
.stat-value {
    font-size: 24px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 5px;
    line-height: 1.2;
}

/* Etiqueta descriptiva */
.stat-label {
    font-size: 13px;
    color: #666666;
    line-height: 1.4;
    max-width: 120px;
    margin: 0 auto;
}

/* Estilos de estado del vendedor */
.stat-value.status-label {
    font-size: 18px; /* Un poco más pequeño para textos más largos */
    color: #3483fa; /* Verde éxito */
}

.stat-value.status-label.is-new {
    color: #3483fa; /* Azul para "Nuevo" */
}

/* Efecto hover */
.stat-column:hover .stat-value:not(.status-label) {
    color: #3483fa;
    transition: color 0.2s ease;
}

/* Responsive para móviles */
@media (max-width: 600px) {
    .stats-card {
        flex-direction: column;
        gap: 15px;
        padding: 20px;
    }

    .stat-column {
        width: 100%;
        padding-bottom: 15px;
    }

    /* En móvil ocultamos los separadores verticales y usamos separadores horizontales */
    .stat-column:not(:last-child)::after {
        width: 80%;
        height: 1px;
        right: 10%;
        top: auto;
        bottom: 0;
    }

    .stat-column:last-child {
        padding-bottom: 0;
    }

    .stat-label {
        max-width: 100%;
    }
}
/* Estilo base para las tarjetas de estadísticas */
.stats-card {
    background: #ffffff;
    border-radius: 8px; /* Borde más sutil, tipo e-commerce */
    padding: 20px 24px;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.12); /* Sombra suave */
    border: 1px solid #e6e6e6;
    display: flex;
    flex-direction: column; /* Cambiado a columna para el termómetro arriba */
    align-items: stretch;
    width: 100%;
    max-width: 600px;
    min-height: 100px;
    margin: 20px 0;
}