/**
 * =====================================================================================
 * MÓDULO CSS..: leds_indicadores.css
 * DESCRIPCIÓN.: Estilos para indicadores LED de alta luminosidad mediante degradados
 *               radiales e iluminación de fotón (box-shadow neón).
 * COMPATIBILIDAD: Todos los navegadores modernos (HTML5/CSS3). Sin dependencias.
 * =====================================================================================
 */

/* -------------------------------------------------------------------------------------
 * Estilo base del componente LED (Estructura física y bisel metálico)
 * ------------------------------------------------------------------------------------- */

.led-circle {
    display: inline-block;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    
    /* Bisel exterior metálico biselado */
    border: 2px solid #8f98a0;
    
    /* Sombra interna para volumen + Sombra externa proyectada */
    box-shadow: 
        inset 0 -3px 6px rgba(0, 0, 0, 0.45), 
        0 2px 4px rgba(0, 0, 0, 0.3);
        
    transition: all 0.3s ease-in-out; /* Transición suave si se cambia de color dinámicamente */
    vertical-align: middle;
    
    /* Estado neutro inicial para los LED CSS (evita el parpadeo en rojo) */
    background-color: #dcdcdc; /* Gris neutro antes de recibir el color definitivo */
}

/* -------------------------------------------------------------------------------------
 * Estado ROJO (Alta Luminosidad / Error / Alarma)
 * ------------------------------------------------------------------------------------- */
.led-red {
    /* Degradado radial: Foco blanco/rosa claro -> Rojo puro vivo -> Rojo oscuro profundo */
    background: radial-gradient(circle at 40% 25%, 
        #ffffff 0%, 
        #ff6666 20%, 
        #ff0000 55%, 
        #990000 100%
    );
    
    /* Resplandor luminoso neón (Emitancia de luz externa) */
    box-shadow: 
        inset 0 -3px 6px rgba(0, 0, 0, 0.45),
        0 0 8px #ff1a1a,
        0 0 14px rgba(255, 0, 0, 0.6);
}

/* -------------------------------------------------------------------------------------
 * Estado AMARILLO (Alta Luminosidad / Advertencia / En Proceso)
 * ------------------------------------------------------------------------------------- */
.led-yellow {
    /* Degradado radial: Foco blanco/amarillo claro -> Amarillo puro neón -> Dorado/Ámbar */
    background: radial-gradient(circle at 40% 25%, 
        #ffffff 0%, 
        #fffa80 20%, 
        #ffea00 55%, 
        #b3a400 100%
    );
    
    /* Resplandor luminoso neón */
    box-shadow: 
        inset 0 -3px 6px rgba(0, 0, 0, 0.45),
        0 0 8px #ffee33,
        0 0 14px rgba(255, 234, 0, 0.65);
}

/* -------------------------------------------------------------------------------------
 * Estado VERDE (Alta Luminosidad / OK / Activo)
 * ------------------------------------------------------------------------------------- */
.led-green {
    /* Degradado radial: Foco blanco/verde claro -> Verde esmeralda vivo -> Verde bosque oscuro */
    background: radial-gradient(circle at 40% 25%, 
        #ffffff 0%, 
        #80ff80 20%, 
        #00e600 55%, 
        #006600 100%
    );
    
    /* Resplandor luminoso neón */
    box-shadow: 
        inset 0 -3px 6px rgba(0, 0, 0, 0.45),
        0 0 8px #33ff33,
        0 0 14px rgba(0, 230, 0, 0.6);
}