/* Clases para las esferas (sin cambios, funcionan independientemente del layout) */
    .spheres-wrapper { 
        display: flex; 
        justify-content: center; 
        align-items: flex-start; 
        flex-wrap: wrap; 
        gap: 30px; 
        width: 100%; 
    }
    .sphere-container { 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        gap: 10px; 
    }
    .sphere { 
        border-radius: 50%; 
        display: flex; 
        justify-content: center; 
        align-items: center; 
        color: white; 
        font-weight: bold; 
        position: relative; 
        box-shadow: inset -15px -15px 40px rgba(0,0,0,0.3), 0 10px 20px rgba(0,0,0,0.2), inset 0 0 10px rgba(255,255,255,0.4); 
        text-shadow: 1px 1px 2px rgba(0,0,0,0.5); 
    }
    .sphere-total { 
        width: 150px; 
        height: 150px; 
        font-size: 4em; 
        background: radial-gradient(circle at 30% 30%, #e0e0e0, #a0a0a0); 
        color: #333; 
    }
    .sphere-principle { 
        width: 140px; 
        height: 140px; 
        font-size: 3.5em; 
    }
    .sphere-dimension { 
        width: 100px; 
        height: 100px; 
        font-size: 2.8em; 
    }
    .color-rojo { background: radial-gradient(circle at 30% 30%, #ff8a80, #c62828); }
    .color-naranja { background: radial-gradient(circle at 30% 30%, #ffb74d, #f57c00); }
    .color-amarillo { background: radial-gradient(circle at 30% 30%, #fff176, #fbc02d); }
    .color-verde-claro { background: radial-gradient(circle at 30% 30%, #95ca97, #63cf69); }
    .color-verde-oscuro { background: radial-gradient(circle at 30% 30%, #81c784, #2c8b33); }

    /* --- ESTILOS RESPONSIVE --- */

    /* Para tablets y pantallas mas pequeñas (menos de 768px) */
    @media (max-width: 768px) {
        .dashboard-container {
            gap: 30px;
        }
        .spheres-wrapper {
            gap: 20px;
        }
        .sphere {
            box-shadow: inset -10px -10px 30px rgba(0,0,0,0.3), 0 8px 16px rgba(0,0,0,0.2), inset 0 0 8px rgba(255,255,255,0.4);
        }
        .sphere-total {
            width: 120px;
            height: 120px;
            font-size: 3.2em;
        }
        .sphere-principle {
            width: 90px;
            height: 90px;
            font-size: 2.8em;
        }
        .sphere-dimension {
            width: 70px;
            height: 70px;
            font-size: 2.5em;
        }
    }

    /* Para telefonos moviles (menos de 480px) */
    @media (max-width: 480px) {
        .dashboard-container {
            gap: 25px;
        }
        .spheres-wrapper {
            gap: 15px;
        }
        .text-label {
            font-size: 1em;
        }
        .sphere {
            box-shadow: inset -8px -8px 20px rgba(0,0,0,0.3), 0 6px 12px rgba(0,0,0,0.2), inset 0 0 6px rgba(255,255,255,0.4);
        }
        .sphere-total {
            width: 90px;
            height: 90px;
            font-size: 2.5em;
        }
        .sphere-principle {
            width: 80px;
            height: 80px;
            font-size: 2.2em;
        }
        .sphere-dimension {
            width: 60px;
            height: 60px;
            font-size: 2em;
        }
    }


    /* Contenedor principal del widget */
    .semaphore-widget {
        display: flex;
        justify-content: center;
        align-items: center;
        /* Espacio adaptable entre las columnas reducido */
        gap: clamp(10px, 3vw, 20px); 
        /* Relleno adaptable reducido */
        padding: clamp(10px, 3vw, 20px); 
        background-color: #ffffff;
        border-radius: 10px; /* Borde ligeramente más pequeño */
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    /* --- SEMÁFORO (DERECHA) --- */
    .traffic-light-housing {
        background-color: #2c3e50;
        padding: 10px; /* Relleno reducido */
        border-radius: 8px; /* Borde reducido */
        display: flex;
        flex-direction: column;
        gap: 8px; /* Separación entre luces reducida */
        border: 2px solid #bdc3c7; /* Borde más fino */
    }

    .light {
        /* TAMAÑO DE LAS LUCES REDUCIDO: Aprox. 60% del tamaño anterior */
        width: clamp(25px, 5vw, 35px);
        height: clamp(25px, 5vw, 35px);
        border-radius: 50%;
        background-color: #34495e;
        box-shadow: inset 0 0 5px rgba(0,0,0,0.6); /* Sombra interior reducida */
        transition: all 0.3s ease;
    }

    .light.active {
         /* Reducimos el brillo exterior */
         box-shadow: 0 0 15px 3px var(--light-color),
                     inset 0 0 8px rgba(255,255,255,0.4); 
         background-color: var(--light-color);
    }

    /* Colores fijos para cada posición (rank) - Sin cambios */
    .rank-0 { --light-color: #c62828; } /* Rojo */
    .rank-1 { --light-color: #f57c00; } /* Naranja */
    .rank-2 { --light-color: #fbc02d; } /* Amarillo */
    .rank-3 { --light-color: #63cf69; } /* Verde Claro */
    .rank-4 { --light-color: #2c8b33; } /* Verde Oscuro */

    /* --- ETIQUETAS (IZQUIERDA) --- */
    .labels-column {
        display: flex;
        flex-direction: column;
        gap: 8px; /* Mismo espaciado que las luces */
    }

    .label-item {
        display: flex;
        align-items: center;
        justify-content: flex-end; 
        text-align: right;
        /* Altura ajustada a las nuevas luces */
        height: clamp(25px, 5vw, 35px);
        color: #34495e;
        /* Fuente reducida */
        font-size: clamp(0.7rem, 2vw, 0.9rem); 
        font-weight: 500;
    }